flutter - 一张幻灯片中有多个项目。颤振 - 飞镖
问题描述
我想使用carousel_slider颤振包创建一个轮播滑块。
当我想在一张幻灯片中显示多个项目时,只要我的列表长度为偶数,一切正常,但如果我的列表长度为奇数,最后一张幻灯片会出错。
这是我的代码
import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
final List<String> imgList = [
'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];
class MultipleItemDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Multiple item in one slide demo')),
body: Container(
child: CarouselSlider.builder(
options: CarouselOptions(
aspectRatio: 2.0,
enlargeCenterPage: false,
viewportFraction: 1,
),
itemCount: (imgList.length / 2).round(),
itemBuilder: (context, index) {
final int first = index * 2;
final int second = first + 1;
return Row(
children: [first, second].map((idx) {
return Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Image.network(imgList[idx], fit: BoxFit.cover),
),
);
}).toList(),
);
},
)
),
);
}
}
解决方案
这是因为您计算要放入Row
. 当前,如果图像数量为奇数,则始终声明并使用 first 和 secondRow
将不起作用,因为那时没有第二张图像。我修改了您的解决方案以使其正常工作。您仍然需要调整您的大小,Row
以便您的单个图像具有与配对图像相同的大小:
class MultipleItemDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
int imageCount = (imgList.length / 2).round();
return Scaffold(
appBar: AppBar(title: Text('Multiple item in one slide demo')),
body: Container(
child: CarouselSlider.builder(
options: CarouselOptions(
aspectRatio: 2.0,
enlargeCenterPage: false,
viewportFraction: 1,
),
itemCount: imageCount,
itemBuilder: (context, index) {
final int first = index;
final int second = index < imageCount - 1 ? first + 1 : null;
return Row(
children: [first, second].map((idx) {
return idx != null
? Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Image.network(imgList[idx], fit: BoxFit.cover),
),
)
: Container();
}).toList(),
);
},
)),
);
}
}
推荐阅读
- wagtail - 对于某些用户来说,Wagtail 管理页面加载速度非常慢(explorable_pages() 问题?)
- python - 在单个图中绘制多条曲线时选择列名作为图例
- python - Selenium Element 不可交互异常 - 如何克服这个问题?
- html - Bootstrap Carousel 如何使用应用的 img-fluid 类垂直对齐图像
- javascript - Nuxt js - SSR 页面重复组件
- wordpress - 如何使用 add_meta_box 保存和获取选定项目 ID 列表
- scala - 根据条件复用 Akka 源/流
- jsonschema - oneOf 嵌套在数组中
- php - 如何检查令牌是否未过期?
- python - Gitbash 在命令参数中将前缀附加到绝对 posix 路径