如何在列表视图构建器颤动中创建水平列表视图

Question

我正在使用 API 来构建电影应用程序，我在将ListView设置为从左到右而不是向上和向下时遇到了问题。我正在尝试创建一个水平列表视图，但它显示不符合预期。 您可以在下面的图像中看到它的外观。 它通常适用于我，但这是我第一次在列表视图构建器中执行此操作。 如何解决？

注意：我希望全屏是垂直的，而这部分只是水平的。

 @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Container(
        child: 
      FutureBuilder(
        future: getData(),
        builder: (BuildContext context,AsyncSnapshot snapshot){
          if(snapshot.data == null){
            return Container(
              child: Center(
                child:CircularProgressIndicator() ,),);
          }
         

          else{
            return ListView.builder(
              
              itemCount: snapshot.data.length, 
               itemBuilder: (BuildContext context,int i){

                 if(snapshot.data==null){
                   return Center(
                     child: CircularProgressIndicator(),
                   );
                 }
                 else{
                 return Container(
                     height: 250,
                     child: Card(
                       child: ListView(
                         scrollDirection: Axis.horizontal,
                         children: [
                           Image(image: NetworkImage(snapshot.data[i].poster))
                         ],
                       ),
                     ),
                   );
               }}
               );
               
          }
         
        }
      ,),
      
        ),
       );
     }
  }

图片

Answer 1

您可以在 Listview.Builder 中使用scrollDirection: Axis.horizontal,使其水平滚动并为正在返回的容器添加width 。

Answer 2

试试下面的代码希望它对你有帮助。 声明您的ListView.builder()如下所示，请在此处参考 Listview

 Container(
            width: double.infinity,
            height: 180,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int i) {
                return Container(
                  height: 50,
                  child: Card(
                    child: Image.network(
                      'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
                    ),
                  ),
                );
              },
            ),
          ),

您的结果屏幕->