首页 > 解决方案 > 如何强制 ListView 不连续扩展超过其他小部件(Flutter)

问题描述

我正在为此苦苦挣扎,无法在搜索引擎上很好地描述它,所以这是我的问题:我有一个包含两个 Expanded 的行,flex: 5旨在拥有两个宽度相等的单元格;在第一个单元格内,我有一个列(包含一个表格和一个按钮);在第二个单元格内我有一个列(包含一个 ListView 和一个按钮);一旦其内容高于第一个单元格的固有高度,我想强制 ListView 变得可滚动,因此第二个单元格的高度永远不会高于第一个单元格的高度。

Row(
   children: [
      Expanded(
         flex: 5,
         child: Column(
            children: [
               DataTable(),
               ElevatedButton()
            ]
         ), // Column
      ), // Expanded
      Expanded(
         flex: 5,
         child: Column(
            children: [
               ListView(),
               ElevatedButton()
            ]
         ), // Column
      ) // Expanded
   ]
) // Row

我迷失了自己shrinkWrap: true在 ListView、IntrinsicHeight()Row 周围等尝试的东西。

谢谢您的帮助!

编辑:

我发现的解决方案是通过聆听第一个单元格的大小变化并将其高度设置为第二个单元格的高度(感谢这个 Medium 链接)来解决问题。即使我宁愿采用更清洁的方式,它似乎也能正常工作。

这是我的代码目前的样子:

Row(
   children: [
      Expanded(
         flex: 5,
         child: WidgetSize(
            onChange: (size) {
               if (size != null)
                  setState(() => heightOfTable = (size as Size).height);
            },
            child: Column(
               children: [
                  DataTable(),
                  ElevatedButton()
               ]
            ), // Column
         ), // WidgetSize
      ), // Expanded
      Expanded(
         flex: 5,
         child: Container(
            height: heightOfTable,
            child: Column(
               children: [
                  ListView(),
                  ElevatedButton()
               ]
            ), // Column
         ), // Container
      ) // Expanded
   ]
) // Row

如果你有更好的想法,请告诉我!:)

标签: flutterlistviewrowheight

解决方案


我认为您可以尝试将ListView内部包裹起来Container并给出合适的height宽度。

Row(
   children: [
      Expanded(
         flex: 5,
         child: Column(
            children: [
               DataTable(),
               ElevatedButton()
            ]
         ), // Column
      ), // Expanded
      Expanded(
         flex: 5,
         child: Column(
            children: [
               Container(
           height:,
           width:,
          child: ListView()),
               ElevatedButton()
            ]
         ), // Column
      ) // Expanded
   ]
) // Row

推荐阅读