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

【问题标题】：How to create horizontal Listview in listview builder flutter如何在列表视图构建器颤动中创建水平列表视图
【发布时间】：2021-10-28 10:05:35
【问题描述】：

我正在使用 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))
                         ],
                       ),
                     ),
                   );
               }}
               );
               
          }
         
        }
      ,),
      
        ),
       );
     }
  }

图片

【问题讨论】：

你想水平显示这个列表而不是垂直正确吗？
@RavindraS.Patil 是的，当我使用 scrollDirection: Axis.horizontal 时，图像会像上图一样向左移动

标签： flutter api dart

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

 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',
                    ),
                  ),
                );
              },
            ),
          ),

您的结果屏幕->

【讨论】：