4 水平 ListViews Flutter

Posted

技术标签:

【中文标题】4 水平 ListViews Flutter【英文标题】:4 Horizontal ListViews Flutter 【发布时间】:2021-02-06 07:16:12 【问题描述】:

我想使用 4 个 listView Builder,它在 SingleChildScrollView 中水平滚动,但即使在尝试了所有内容之后页面也没有垂直滚动,任何人都可以帮助我解决这个问题。 示例:

@override
 Widget build(BuildContext context) 
   return FutureBuilder(
     future: getLibrayCourse(),
     builder:  (context,snapshot)
       if(snapshot.connectionState==ConnectionState.waiting)
         return Center(child: CircularProgressIndicator());
       
       return Container(
         padding: EdgeInsets.all(20),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text("Free Video Courses",style: TextStyle(
               fontWeight: FontWeight.bold,
               fontSize: 18
             ),),
             SizedBox(height:10),
             Container(
               height: MediaQuery.of(context).size.height/4,
               child: ListView.builder(
                   scrollDirection: Axis.horizontal,
                   shrinkWrap: true,
                   itemCount: 10,
                   itemBuilder: (context, index)
                     return Card(
                       child: Text("YOYO"),
                     );
                   ),
             ),
             Text("Free Video Courses",style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 18
             ),),
             SizedBox(height:10),
             Container(
               height: MediaQuery.of(context).size.height/4,
               child: ListView.builder(
                   scrollDirection: Axis.horizontal,
                   shrinkWrap: true,
                   itemCount: 10,
                   itemBuilder: (context, index)
                     return Card(
                       child: Text("YOYO"),
                     );
                   ),
             ),
             Text("Free Video Courses",style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 18
             ),),
             SizedBox(height:10),
             Container(
               height: MediaQuery.of(context).size.height/4,
               child: ListView.builder(
                   scrollDirection: Axis.horizontal,
                   shrinkWrap: true,
                   itemCount: 10,
                   itemBuilder: (context, index)
                     return Card(
                       child: Text("YOYO"),
                     );
                   ),
             ),
             Text("Free Video Courses",style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 18
             ),),
             SizedBox(height:10),
             Container(
               height: MediaQuery.of(context).size.height/4,
               child: ListView.builder(
                   scrollDirection: Axis.horizontal,
                   shrinkWrap: true,
                   itemCount: 10,
                   itemBuilder: (context, index)
                     return Card(
                       child: Text("YOYO"),
                     );
                   ),
             ),

           ],
         ),
       );
     ,
   );
 

如果我在水平小部件中使用 neverscrollable,它将停止滚动,所以这是一个问题 我已经尝试添加容器高度,使用扩展等仍然存在问题

【问题讨论】:

总是显示代码,在你的列表视图中添加物理永远不可滚动并且应该可以正常工作 你试过flutter Slivers吗? 制作 ListView(shrinkWrap: true, primary: false,) 如果我使用或从不使用可滚动物理,我的列表视图将停止滚动,我希望它滚动。 @AsfarAli 不,我没有 【参考方案1】:

我复制并使用了您的代码,只是将“列”移动到“SingleChildScrollView”。它对我有用,水平和垂直滚动。

@override
  Widget build(BuildContext context) 
    return FutureBuilder(
      builder: (context, snapshot) 
        if (snapshot.connectionState == ConnectionState.waiting) 
          return Center(child: CircularProgressIndicator());
        
        return Container(
          padding: EdgeInsets.all(20),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // your children
              ]
            ),
          ),
        );
      ,
    );
  

希望对你有用。

【讨论】:

以上是关于4 水平 ListViews Flutter的主要内容,如果未能解决你的问题,请参考以下文章

ListView Flutter 中的 ListViews

在 RecyclerView 内的 ListViews 中显示项目

Android:SQLite 和 ListViews

ListViews 覆盖了下面的一切

安卓。 notifyDataSetChanged() 方法和 ListViews 是如何工作的?

ScrollView 中的 ListViews 与我的 TextViews 重叠