Flutter如何使用数据列表创建水平可滚动的卡片视图

Question

我正在创建一个水平可滚动的卡片视图。在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 方法时，我在屏幕中看不到任何小部件。代码后屏幕显示为空白，并且汽车的数量应取决于列表中可用值的数量。

Answer 1

您的列表未显示，因为您没有为其指定任何高度。添加height到包装 ListView 的容器。

创建一个可以使用的动态列表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')
                    ],
                  ),
                ),
              ),
        )
    );
  }