flutter - 在颤动中为滑块使用离线图像
问题描述
晚上好
我已经使用了这个滑块图像示例,它工作正常,但我没有什么问题,我想在这个代码上使用我的本地图像,但是当项目运行时,它向我显示蓝色矩形,我如何使用我的本地图像这个滑块?谢谢这里是代码:
class CarouselDemo extends StatefulWidget {
CarouselDemo() : super();
final String title = "Carousel Demo";
@override
CarouselDemoState createState() => CarouselDemoState();
}
class CarouselDemoState extends State<CarouselDemo> {
CarouselSlider carouselSlider;
int _current = 0;
List imgList = [
new AssetImage('images/main-slider/1.jpg'),
new AssetImage('images/main-slider/2.jpg'),
new AssetImage('images/main-slider/3.jpg'),
new AssetImage('images/main-slider/4.jpg'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
carouselSlider = CarouselSlider(
height: 400.0,
initialPage: 0,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
items: imgList.map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.green,
),
child: Image.network(
imgUrl,
fit: BoxFit.fill,
),
);
},
);
}).toList(),
),
),
),
);
}
解决方案
问题是,imgList
但List<AssetImage>
您正在尝试使用 Image.network 显示图像。
Image.network 创建一个显示从网络获得的 [ImageStream] 的小部件。
你需要的是创建一个List<Sring>
字符串将是相对于pubspec.yaml
文件的路径。也不要使用 Image.Network 你应该使用 Image.assest 因为你想创建一个显示从资产包获得的 [ImageStream] 的小部件。
class CarouselDemo extends StatefulWidget {
CarouselDemo() : super();
final String title = "Carousel Demo";
@override
CarouselDemoState createState() => CarouselDemoState();
}
class CarouselDemoState extends State<CarouselDemo> {
CarouselSlider carouselSlider;
int _current = 0;
List imgList = [
'images/main-slider/1.jpg',
'images/main-slider/2.jpg',
'images/main-slider/3.jpg',
'images/main-slider/4.jpg'
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
carouselSlider = CarouselSlider(
height: 400.0,
initialPage: 0,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
items: imgList.map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.green,
),
child: Image.asset(
imgUrl,
fit: BoxFit.fill,
),
);
},
);
}).toList(),
),
],
),
),
);
}
}
推荐阅读
- oracle - 执行 OracleDataAdapter.Fill 时程序没有响应
- raspberry-pi - RPi OverlayFS 和只读也将外部安装的驱动器变为只读/仅根
- python - 没有pip的嵌入式Python手动安装包
- javascript - WebGL 剪刀 - 浏览器实现或文档中的错误?
- javascript - 被调用函数中的等待方法与直接记录的相同方法之间的返回不同
- c++ - 通过共享指针访问类成员
- azure - 如何在 golang 中实现授权码授权流程以登录 Azure AD
- reactjs - 将数据添加到我的 firebase firestore 后端数据库后重新渲染反应组件
- meteor - 阿波罗 3 号、流星和“没有光纤就无法等待”
- macos - Mac Endpoint 安全性 - 防止用户删除钥匙串项目