晚上好
我已经使用了这个 slider 图像示例,它工作正常,但我没有什么问题,我想在这个代码上使用我的本地镜像,但是当项目运行时,它向我显示蓝色矩形,我如何使用我的本地镜像这个 slider ?
谢谢你
这是代码:
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 creates a widget that displays an [ImageStream] obtained from the network.
你需要的是创建一个
List<Sring>
其中字符串将是相对于 pubspec.yaml
的路径文件。也不要使用 Image.Network 你应该使用 Image.assest 因为你想创建一个显示从 Assets 包获得的 [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(),
),
],
),
),
);
}
}
关于flutter - 在 flutter 中为 slider 使用离线图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60458924/