我正在创建一个水平滚动的卡片 View 。在 cardview 中，我想设置图像和 TextView 。cardview 中的数据将从列表中获取。现在如何在 cardview 中设置列​​表数据

 @override
 Widget build(BuildContext context) {
     return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: new Scaffold(
             body: new SingleChildScrollView(
                 child: Column( 
                     mainAxisSize: MainAxisSize.min,    
                     children: <Widget>[   
                         buildBody(),
                         productsCard()   
                         ],
                     ),
                 ),
             )
         );
     }
    Widget buildBody() {
        return Stack(
            // alignment: Alignment.bottomCenter,
            children: <Widget> [
                new Image(
                    image: new AssetImage('assets/homebg.png'),
                    ), 

               Positioned(
                   left: 50.0,
                   right: 50.0,
                   bottom: 40.0, 
                   height: 64.0,// adjust this if you want some padding
                   child: RaisedGradientButton(
                       onPressed: () {
                           Navigator.push(
                               context, MaterialPageRoute(builder: (context) => StylistPage()));
                        },
                        child: new Text("BOOK AN APPOINTMENT", 
                            style: TextStyle(fontSize: 20.0, color: Colors.white),

                         ),
                        gradient: LinearGradient(
                            colors: <Color>[const Color(0xFF000000),const Color(0xFF000000), const Color(0xFF40079B)],
                        ),
                    ), // child widget
                ),
               ]
            );
    }

    Widget productsCard(){
        return Container(
            child: ListView(     
                scrollDirection: Axis.horizontal, // <-- Like so
                children: <Widget>[
                    Container(
                        width: 160.0,
                        color: Colors.red,
                     ),

                     Container(
                         width: 160.0,
                         color: Colors.blue,
                      ),

                     Container(
                         width: 160.0,
                         color: Colors.green,
                      ),

                  ],
            )
        );
    }

//这是我的数据列表。我在列表的每个项目中有四个值。

 List<ProductsCollection> productData = []
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'));

当我尝试调用 productsCard 方法时，我在屏幕上看不到任何小部件。屏幕在代码后显示为空白，而且汽车的数量应取决于列表中可用值的数量。

最佳答案

您的列表没有显示，因为您没有给它任何高度。将 height 添加到包装 ListView 的 Container。

要创建一个动态列表，您可以使用 ListView.builder 并在卡片中显示您的数据，Column 将帮助您。 itemCount 将构建 productData.length 卡的数量。

    Widget productsCard(){
    return Container(
      height: 200.0,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: productData.length,
          itemBuilder: (BuildContext context, int i) =>
              Card(
                child: Container(
                  width: 160.0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Text('Discipline curl'),
                      Text('https://sgdfgdgd/jdkjdhj.png/jashdghd'),
                      Text('20'),
                      Text('akhsgdahghsgdh')
                    ],
                  ),
                ),
              ),
        )
    );
  }

关于Flutter 如何使用数据列表创建水平可滚动的卡片 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54021569/