[英]Flutter : How to make every card unique using Listview.builder?
这是我家写的代码。dart文件。
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
height: 245,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount:10,
itemBuilder: (context, index) {
return VideoCard(long: true);
}
),
),
),
这是 VideoCard() class
class VideoCard extends material.StatelessWidget {
final bool long;
const VideoCard({
@material.required this.long,
material.Key key,
}) : super(key: key);
@override
material.Widget build(material.BuildContext context) {
return material.Padding(
padding: const material.EdgeInsets.all(10.0),
child: CardWidget(
gradient: false,
button: true,
width: long ? 360 : 180,
child: material.Column(
mainAxisAlignment: material.MainAxisAlignment.start,
children: <material.Widget>[
material.Container(
width: long ? 360 : 180,
height: 90,
decoration: material.BoxDecoration(
image: material.DecorationImage(
image: material.AssetImage('assets/images/bitcoin.png'),
fit: material.BoxFit.contain),
borderRadius: material.BorderRadius.only(
topLeft: material.Radius.circular(10),
topRight: material.Radius.circular(10),
),
),
child: material.Text(""),
),
material.Padding(
padding: const material.EdgeInsets.all(8.0),
child: material.Text(
"BITCOIN - A pioneer in Crypto!",
overflow: material.TextOverflow.ellipsis,
maxLines: 2,
style: material.TextStyle(
color: material.Colors.white,
fontFamily: 'Red Hat Display',
backgroundColor: material.Colors.black,
fontSize: 16),
),
),
material.Padding(
padding: const material.EdgeInsets.symmetric(horizontal: 8.0),
child: material.Row(
children: <material.Widget>[
material.Icon(BoxIcons.bx_bar_chart_alt_2, size: 16),
material.Text(
"Beginner",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Spacer(),
material.Text(
"10 mins",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Icon(BoxIcons.bx_timer, size: 16),
],
),
),
material.Spacer(),
material.Padding(
padding: const material.EdgeInsets.only(top: 6.0),
child: material.GestureDetector(
child: material.Container(
padding: material.EdgeInsets.fromLTRB(0, 14, 0, 14),
decoration: material.BoxDecoration(gradient: Colors().waves),
child: material.Row(
mainAxisAlignment: material.MainAxisAlignment.spaceEvenly,
children: <material.Widget>[
material.Icon(BoxIcons.bx_play_circle,
color: material.Colors.black),
material.Text(
"Learn it",
style: material.TextStyle(
color: material.Colors.black,
fontFamily: 'Red Hat Display',
fontSize: 18),
)
],
),
),
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(),
),
);
},
),
),
],
),
),
);
}
}
这是我得到的结果。
但我想要每张卡片(列表)的独特文字和图像。 每个列表的设计应该相同。 但是对于每张卡片(列表),文本、图像、onTap() 手势应该是不同的。 难道我的逻辑错了? 任何答案表示赞赏!
您可以将参数传递给 VideoCard 的构造函数,例如VideoCard(text: textFromListView, image: imageFromListView)
。 在VideoPage
,您也可以像VideoPage(text: textFromVideoCard, imaeg: imageFromVideoCard);
在 VideoCard onTap() 你可以这样做
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(text: textFromVideoCard, image: imageFromVideoCard),
),
);
},
然后在VideoPage
中,您可以访问所需的文本和图像。 快乐编码。
您已经对文本、图像和 onTap 进行了硬编码。 您应该从 map 或列表传递数据,并使用 [index] 告诉您的代码列表中索引为 0 的卡片应使用索引为 0 的文本,而索引为 1 的卡片应使用索引为 1 的文本。
如果列表中的项目不会更改,并且您想对它们进行硬编码,则可以在没有.builder的情况下执行此操作。 您可以简单地使用ListView小部件。 您还可以使用行和/或列小部件。
ListView(
child: Column(
children[
Card(),
Card(),
Card()
]))
如果您想要两列设计,请在 Row 小部件内创建两个 Columns 或 ListView。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.