在颤动中创建卡片和下方的标题

Question

请问我如何使用颤振实现上图。一个带有文本的卡片视图，并将其放在水平的 listview.builder 中，以便用数据填充它。

  ListView homeList(){
var listView = ListView(
  shrinkWrap: true,
  children: <Widget>[
    _imageSlider(),

    Padding(
      padding: EdgeInsets.only(top: 15.0, bottom: 15.0, left: 15.0),
      child: Text("Trending", style: TextStyle(color: Colors.white, fontSize: 15.0),),
    ),

   Container(
     child: FutureBuilder(
       future: _trendingListImages(),
         builder: (BuildContext context, AsyncSnapshot async){
           if(async.data == null){
           return ColorLoader3(
          radius: 20.0,
          dotRadius: 5.0,
           );
          }else{
            return ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
                itemCount: async.data.length,
                itemBuilder: (BuildContext context, int position){
                      return Card(
                        child: ListTile(
                          title:Image.network(
                                "http://image.tmdb.org/t/p/w500/"+async.data[position].backdropPath,),


                          subtitle: Text(async.data[position].title),
                        )
                      );
                }
            );
           }
         }
     ),
   )
  ],
);

return listView;

}

这是我尝试过的，而且它似乎不起作用，我尝试了几个小时似乎都无法解决。非常感谢您的帮助。

Answer 1

您需要修改您的ListView.builder，同样可以使用 -Column

示例代码 - 您可以编辑它以匹配您的字段

return ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 25,
        itemBuilder: (BuildContext context, int position) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Card(
                elevation: 18.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                child: Image.network(
                  'https://placeimg.com/640/480/any',
                  fit: BoxFit.cover,
                  height: 200.0,
                  width: 130.0,
                ),
                clipBehavior: Clip.antiAlias,
                margin: EdgeInsets.all(8.0),
              ),
              Text(
                'Film Title',
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              )
            ],
          );
        });

输出：