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

Question

在我的应用程序中，我想在主屏幕上水平和垂直显示两种不同的产品。但我想用 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。垂直部分的高度应该等于里面的元素。

Answer 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) {
                  ...
                  ...
                  ...
                },
              ),
            ],
          )
      )

Answer 2

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

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

Answer 3

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

Answer 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
          ],
        ),
      ),
    );

试试这个