[英]Flutter carousel slider place text under image
我试图在我的轮播 slider 中的图像下放置文本,但现在文本出现在图像上,而不是在图像下。
这是我的代码:
final CarouselSlider autoPlayDemo = CarouselSlider(
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: false,
enlargeCenterPage: true,
items: imgList.map(
(child) {
return Container(
margin: EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(children: <Widget>[
Image.asset(
child,
fit: BoxFit.cover,
width: 1000.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: Text(
'Text',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
))
])),
);
},
).toList(),
);
我该怎么做才能将文本放置在图像上的图像下?
Stack(children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 600,
decoration: BoxDecoration(
color: Color.fromRGBO(217,225,216,1),
),
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Text(
'News',
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 50.0),
child: Column(children: [
autoPlayDemo,
])),
]),
用Stack
小部件包装它们是错误的。 Stack
是一个小部件,可将其子项彼此重叠显示。 相反,将它们包装在一个Column
小部件中,该小部件以水平方式在彼此下方显示其子级。
还使用ClipRRect
包装图像以实现您的目标。
final CarouselSlider autoPlayDemo = CarouselSlider(
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: false,
enlargeCenterPage: true,
items: imgList.map(
(child) {
return Container(
margin: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.asset(
child,
fit: BoxFit.cover,
width: 1000.0,
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: Text(
'Text',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
},
).toList(),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.