在垂直列表视图中颤动动态高度水平列表视图

Posted 2023-03-06

【中文标题】在垂直列表视图中颤动动态高度水平列表视图

【英文标题】：Flutter Dynamic Height Horizontal Listivew inside Vertical Listview

【发布时间】：2022-01-17 08:08:30

【问题描述】：

我在组装应用程序中很常见的布局时遇到了一些困难。

我有一个 ListView.builder，涉及一个展开的列内。对于每个项目，我都有一个新的 ListView.builder（水平），但它只有在我放置固定高度时才有效。

有没有办法让这个水平（子）列表动态化，有几种不同的大小，而不需要固定的高度？

Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 10,
            itemBuilder: (context, index) 
              return SizedBox(
                height: 30, //Only works with this height
                width: MediaQuery.of(context).size.width,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 2,
                  itemBuilder: (context, index) 
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      color: index == 0 ? Colors.blue : Colors.red,
                      child: Text("Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem"),
                    );
                ,),
              );
          ,),
        )

PS.：我尝试过 Expanded、Flexible、InstrinctHeight，但没有任何效果。

【问题讨论】：

您能否添加您正在尝试实现的设计的屏幕截图？

@SajadAbdollahi 完成。

这真的需要动态高度的列表吗？我看不到你想把这个列表视图放在哪里

@SajadAbdollahi 是的，因为单元格是动态的，练习名称会影响单元格的高度。

为什么不把它限制在一行？使用Text(maxLines:1)

【参考方案1】：

  return Scaffold(
          body: ListView.builder(
            shrinkWrap: true,
            itemCount: 10,
            itemBuilder: (context, index) 
              return SizedBox(
                height: 30, //Only works with this height
                width: MediaQuery.of(context).size.width,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 2,
                  itemBuilder: (context, index) 
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      color: index == 0 ? Colors.blue : Colors.red,
                      child: Text(
                          "Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem"),
                    );
                  ,
                ),
              );
            ,
          ),
        );

【讨论】：

您好，感谢您的回复。我不确定我是否正确，但您的回答与我给出的示例相同吗？

我给他的答案是对应他的代码，我做了一些调整