在 Flutter 的垂直列表中添加动态高度水平列表视图

Posted 2023-02-23

【中文标题】在 Flutter 的垂直列表中添加动态高度水平列表视图

【英文标题】：Add dynamic height horizontal list-view inside vertical list in Flutter

【发布时间】：2019-06-26 02:42:12

【问题描述】：

我在垂直列表中添加水平列表视图。它没有显示任何内容

 @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: new ListView.builder(
            itemCount: 3,
            scrollDirection: Axis.vertical,
            itemBuilder: (context, position) 
              if (position == 0) 
                return Container(
                  child: Text("First rwo"),
                );
               else if (position == 1) 
                return Container(
                  child: Text("second  rwo"),
                );
               else if (position == 2) 
                return Container(
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 4,
                        shrinkWrap: true,
                        itemBuilder: (context, pos) 
                          return Text("List ");
                        ));
              
            ));
  

当我将 height 属性添加到位置 2 container 时，它可以工作。 但我想要动态高度。

SingleChildScrollView 是另一种选择，但它不适合无限列表。

【问题讨论】：

将水平 ListView 放置在垂直 ListView 适配器中。为水平列表膨胀布局。以后别忘了设置适配器。

@VipiNNegi 它在 Flutter 兄弟中

抱歉没有在标签中看到。应该在问题或标题中提及。

【参考方案1】：

在SingleChildScrollview 内切换到Row：

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: new ListView.builder(
        itemCount: 3,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, position) 
          if (position == 0) 
            return Container(
              child: Text("First rwo"),
            );
           else if (position == 1) 
            return Container(
              child: Text("second  rwo"),
            );
           else if (position == 2) 
            return SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [Text("List"), Text("List"), Text("List"), Text("List")],
              ),
            );
          
        ,
      ),
    );
  

【讨论】：

但是 SingleChildScrollView 不适合无限水平列表。

但是Flutter框架没有办法在不构建每个孩子的情况下计算高度。所以你要么拥有固定高度的无限水平滚动视图，要么拥有固定长度的动态高度水平滚动视图，你不能同时拥有它。

如果您有很多项目（大列表），此解决方案将非常滞后。 :((