删除对话框中列内两个 ListView 之间的空格 - Flutter

Question

我需要在一个对话框中显示两个 ListView； 我正在使用 showDialog function 并在“content”属性中添加了一个“SizedBox”，而“height”属性没有任何值，列表位于列 object 内。这是代码：

showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: SizedBox(
          width: double.maxFinite,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Text1'),
              Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: listOne.length,
                  itemBuilder: (context, index) {
                      return Text(listOne.elementAt(index).name);
                  },
                ),
              ),
              Text('Text 2'),
              Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: listTwo.length,
                  itemBuilder: (context, index) {
                      return Text(listTwo.elementAt(index).name);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );

我已经检查过两个列表的项目计数是否正确。 这是结果：

如果可能的话，我想删除两个列表之间的大空格。 希望可以有人帮帮我。

Answer 1

Expanded ：一个小部件，用于扩展 Row、Column 或 Flex 的子级，以便子级填充可用空间。

所以默认情况下它会扩展到屏幕的整个高度。

解决方法：

使用Flexible的小部件进行更改：

与Expanded不同， Flexible不需要孩子填充可用空间。

children: [
  Text('Text1'),
  Flexible(
    child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: 3,
      itemBuilder: (context, index) {
          return Text('.name');
      },
    ),
  ),
  Text('Text 2'),
  Flexible(
    child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: 4,
      itemBuilder: (context, index) {
          return Text('.name');
      },
    ),
  ),
],

Answer 2

Expanded小部件试图扩展到两个列表的屏幕全尺寸范围时出现空白。 如果您使用Sizedbox更改Expanded小部件并为其两个列表指定高度，它将删除之间和之后的空白。

我希望这有帮助