Flutter：如何使用 Listview.builder 使每张卡片都独一无二？

Question

这是我在 home.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 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(),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是我得到的结果。

但我希望每张卡片（列表）都有独特的文字和图像。 每个列表的设计应该相同。但是每个 card(list) 的 text,image,onTap() 手势应该是不同的。 难道我的逻辑错了？ 任何答案表示赞赏！

Answer 1

您已经对文本、图像和 onTap 进行了硬编码。您应该从地图或列表中传递数据并使用 [index] 告诉您的代码列表中索引为 0 的卡片应使用索引为 0 的文本，索引为 1 的卡片应使用索引为 1 的文本。

如果列表中的项目不会更改，并且您想对它们进行硬编码，则可以在没有 .builder 的情况下执行此操作。您可以简单地使用 ListView 小部件。您还可以使用 Row 和/或 Column 小部件。

ListView(
    child: Column(
      children[
       Card(),
       Card(),
       Card()
     ]))

如果您想要两列设计，请在 Row 小部件内创建两个 Columns 或 ListView。

Answer 2

您可以将参数传递给 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 你可以访问你想要的文本和图像。编码愉快。