flutter - 无法在轮播中加载图像列表
问题描述
我试图在轮播滑块中传递图像列表视图,但它显示错误。所有图片都可以正常工作,但是当我在列表中传递它时,它显示无法加载。
以下是轮播滑块的代码 - :
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class UserProfile extends StatefulWidget {
UserProfile() : super();
@override
_UserProfileState createState() => _UserProfileState();
}
class _UserProfileState extends State<UserProfile> {
CarouselSlider carouselSlider;
List imgList = [
'assets/user1.jpg',
'assets/f.png',
'assets/f2.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
body: Container(
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.loose,
flex: 5,
child: Container(
height: 400,
child: ListView.builder(
itemCount: imgList.length,
itemBuilder: (BuildContext context, int index){
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
height: 385.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.easeInBack,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 900),
viewportFraction: 0.8,
),
items: [
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
'${imgList[index]}',
fit: BoxFit.fill,
),
),
),
]
),
],
);
},
),
),
),
Flexible(
fit: FlexFit.loose,
flex: 4,
child: Placeholder(),
),
],
),
),
),
),
);
}
Widget buildAppBar() => AppBar(
elevation: 15,
backgroundColor: Colors.white,
centerTitle: true,
leading: InkWell(
child: Icon(
Icons.arrow_back_ios,
color: Colors.pinkAccent,
),
onTap: () {
Navigator.pop(context);
},
),
title: Text(
'Carousel Slider',
style: TextStyle(
fontSize: 25,
color: Colors.black,
),
),
);
}
这显示错误-:无法加载图像列表 ['assets/user1.jpg','assets/f.png','assets/f2.png',]
乐于接受建议。
解决方案
删除 ListView 小部件
并将其作为项目传递给您的CarouselSlider
项目
items: imgList.map((item) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
),
},
);
}).toList(),
推荐阅读
- react-native - 如何运行特定的 fastlane 任务,例如“pilot”
- amazon-s3 - 通过 Lambda 和 API Gateway 从 AWS S3 下载图像——使用 fetch 类
- javascript - Storybook React 及其示例组件不起作用
- python - 在 python 中,如果 y==0 则做一些事情,如果 y!=0 则做其他事情
- c - 为什么到达 MEX 文件的最后一行后返回 Matlab 需要这么长时间?
- symfony - symfony 在规范化实体时找不到支持规范化器
- c - 为什么下面的代码会在字符串末尾执行意外的字母?
- javascript - 链 connect/mapStateToProps/mapDispatchToProps 函数用于 react-redux 中的代码重用
- java - 你如何在java中重复初始化一个新标签?
- java - @MatrixVariable 注解的 pathVar 属性在 Spring 中是如何工作的?