Flutter 如何使用數據列表創建水平可滾動卡片視圖

Question

我正在創建一個水平可滾動的卡片視圖。 在cardview里面，我想設置image和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 的 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')
                    ],
                  ),
                ),
              ),
        )
    );
  }