Flutter 无法在转盘中加载图像列表
我试图在旋转木马滑块中传递图像列表视图，但它显示错误。所有图片都在工作，但当我在列表中传递它时，它显示无法加载 以下是转盘滑块的代码-：Flutter 无法在转盘中加载图像列表,flutter,flutter-layout,carousel,flutter-dependencies,Flutter,Flutter Layout,Carousel,Flutter Dependencies,我试图在旋转木马滑块中传递图像列表视图，但它显示错误。所有图片都在工作，但当我在列表中传递它时，它显示无法加载 以下是转盘滑块的代码-： import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; class UserProfile extends StatefulWidget { UserProfile() : super(); @override
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,
),
),
);
}
导入“包装：颤振/材料.省道”；
导入“package:carousel_slider/carousel_slider.dart”；
类UserProfile扩展了StatefulWidget{
UserProfile（）：super（）；
@凌驾
_UserProfileState createState（）=>\u UserProfileState（）；
}
类_UserProfileState扩展了状态{
旋转滑翔机；
列表imgList=[
“assets/user1.jpg”，
“资产/f.png”，
“资产/f2.jpg”，
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:buildAppBar（），
主体：容器(
孩子：填充(
填充：仅限常量边集（左：30，右：30，顶部：10），
子：SingleChildScrollView(
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
mainAxisAlignment:mainAxisAlignment.center，
mainAxisSize:mainAxisSize.min，
儿童：[
灵活的(
适合：FlexFit.宽松，
弹性：5，
子：容器(
身高：400，
子项：ListView.builder(
itemCount:imgList.length，
itemBuilder:（构建上下文，int索引）{
返回列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
旋转滑翔机(
选项：旋转木马(
身高：385.0，
放大中心页：正确，
自动播放：对，
专题：16/9，
自动播放曲线：Curves.easeInBack，
启用无限滚动：正确，
autoPlayAnimationDuration:持续时间（毫秒：900），
视口分数：0.8，
),
项目：[
填充物(
填充：仅限常量边集（左：30.0），
子：容器(
身高：250，
边距：边集。对称（垂直：0），
装饰：盒子装饰(
颜色：颜色，黑色，
边界半径：边界半径。圆形（16），
boxShadow：[
箱形阴影(
颜色：颜色。蓝灰色[100]，
半径：3，
扩展半径：3，
),
],
),
子：Image.asset(
“${imgList[index]}”，
fit:BoxFit.fill，
),
),
),
]
),
],
);
},
),
),
),
灵活的(
适合：FlexFit.宽松，
弹性：4，
子：占位符（），
),
],
),
),
),
),
);
}
Widget buildAppBar（）=>AppBar(
标高：15，
背景颜色：Colors.white，
标题：对，
引导：InkWell(
子：图标(
Icons.arrow\u back\u ios，
颜色：Colors.pinkAccent，
),
onTap:（）{
Navigator.pop（上下文）；
},
),
标题：正文(
“转盘滑块”，
样式：TextStyle(
尺寸：25，
颜色：颜色，黑色，
),
),
);
}
您是否在pubspec.yaml中添加了assets/user1.jpg、assets/f.png、assets/f2.png 示例链接： 例如：
assets:
- assets/user1.jpg
- assets/f.png
- assets/f2.png
您是否在pubspec.yaml中添加了assets/user1.jpg、assets/f.png、assets/f2.png 示例链接： 例如：
assets:
- assets/user1.jpg
- assets/f.png
- assets/f2.png
旋转滑翔机项目中
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(),
删除ListView小部件
并将其作为项目传递到您的旋转滑翔机项目中
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(),
这是因为您没有在Carousel
项目中迭代imgList
只需用您的CarouselSlider
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: imgList.map((item) {
return Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
'$item',
fit: BoxFit.fill,
),
),
);
}).toList(),
),
在这里，我在您的CarouselSlider
的items
中添加了imgList
，以在imgList
项上迭代您的CarouselSlider
只需用您的CarouselSlider
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: imgList.map((item) {
return Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
'$item',
fit: BoxFit.fill,
),
),
);
}).toList(),
),
在这里，我在您的旋转木马的项目中添加了imgList
，以在imgList
项目上迭代您的旋转木马。是的，我这样做了，但仍然不起作用？你能发布你的图像文件夹结构吗