在颤动的页面上同时使用水平和垂直 listview.builder

Posted 2023-02-23

【中文标题】在颤动的页面上同时使用水平和垂直 listview.builder

【英文标题】：Using both horizontal and vertical listview.builder on a page in flutter

【发布时间】：2021-11-03 09:53:55

【问题描述】：

在我的应用程序中，我想在主屏幕上水平和垂直显示两种不同的产品。但我想用 ListView.Builder 来做这件事，因为它们都是列表。我找不到这个的正确用法，你能帮忙吗？

SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        SizedBox(
                          height: 200.0,
                          child: ListView.builder(
                            physics: ClampingScrollPhysics(),
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemCount: 25,
                            itemBuilder: (BuildContext context, int index) =>
                                Card(
                              child: Center(child: Text('Horizontal List Child')),
                            ),
                          ),
                        ),
                        ListView.builder(
                          itemCount: 10,
                          shrinkWrap: true,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (context, index) 
                            return Expanded(
                              child: Card(
                                  child:
                                      Center(child: Text('Vertical List Child'))),
                            );
                          ,
                        )
                      ],
                    ),
                  ),

我可以不使用 ListView.builder 做到这一点，但我需要使用 ListView.builder。垂直部分的高度应该等于里面的元素。

【参考方案1】：

您必须定义任何滚动视图的高度。我更喜欢水平滚动视图

      SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 150,
                child: ListView.builder(
                  physics: ClampingScrollPhysics(),
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 25,
                  itemBuilder: (BuildContext context, int index) 
                    ...
                    ...
                    ...
                  ,
                ),
              ),
              ListView.builder(
                itemCount: 10,
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemBuilder: (context, index) 
                  ...
                  ...
                  ...
                ,
              ),
            ],
          )
      )

【讨论】：

感谢您的回复，但我不断收到 hasSize 错误。

【参考方案2】：

扩展使里面的物品变成全身。 只需将其删除，高度即可使项目高度等于卡片

    ListView.builder(
    itemCount: 10,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemBuilder: (context, index) 
           return Card(
               child: Center(child: Text('Vertical List 
    Child')
       )
     );
   ,
 )

【讨论】：

经过我的尝试，实际上扩展卡在那里。我通常不会那样使用它，而且它不像你说的那样工作。

【参考方案3】：

删除 SingleChildScrollView。 将 Expanded 作为父级添加到第二个 ListView。 从卡中删除扩展

【参考方案4】：

Scaffold(
      body: SafeArea( //in case you dont have appbar
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            
            const SliverToBoxAdaptar(child:Container(child:ListView(...)))// horizontalList
            const SliverList()// verticalSliverList
          ],
        ),
      ),
    );

试试这个

【讨论】：

我不能用这个，因为页面顶部有标签栏。

@oustW 看看这里***.com/questions/54512171/…