Flutter 对话框根据内容调整大小并在内容过长时滚动答案

【问题标题】：Flutter dialog adjust size to content and scroll if content too longFlutter 对话框根据内容调整大小并在内容过长时滚动
【发布时间】：2021-06-14 11:44:20
【问题描述】：

我有一个 AlertDialog（因为我使用 SimpleDialog 得到了更差的结果，但这也可以），我想将内容放入其中，有时可能小于可用空间（所以我想要对话框缩小到内容并且没有一堆空白）并且有时可能会有比屏幕上容纳的更多的内容（在这种情况下，对话框应该扩展以填充可用空间并且可以滚动以查看“溢出”内容） .

在我的一生中，在各种容器、Expanded、ConstrainedBox 和 SizedBoxes 中尝试了许多不同的包装件组合，但当内容大于可用的垂直空间时（它确实会正确缩小），这将无法正常工作）。我可以让更大的内容正确滚动的唯一方法是，如果我明确地将大小设置为填满整个屏幕，如果内容没有填满大小，则会留下一堆空白区域。

这是我正在尝试做的一个粗略示例（实际代码很长）：

AlertDialog(
  content: Container( //or ConstrainedBox
    child: Column(
      children: [
         Container(height: 100),
         Container(height: 100),
         Container(height: 100),
         ListView( //when this doesn't show there, the dialog shrinks properly, when this does show, it overflows and doesn't scroll, 
    //and when wrapped in an expanded to fill the remaining space, there is a Renderflow Viewport error from intrinsic dimensions
           children: [
             Container(height: 500),
             Container(height: 500),
             Container(height: 500),
           ]
         ),
      ]
    )
  )
)

【问题讨论】：

stackoverflow.com/a/66610695/7973670 添加 SingleChildScrollView 将有助于滚动。
将 shrinkWrap: true 添加到 ListView。这告诉 Listview 计算其所有子项的大小，而不是尽可能多地占用空间。您收到错误是因为 Column 允许其子级占用尽可能多的空间，从而使 ListView 占用无限空间。在上面的代码中，最好将您的 Column 替换为 ListView 并删除嵌套的 ListView

标签： flutter dart flutter-layout

【解决方案1】：

我已经测试过这个解决方案。它适用于我的模拟器。

首先，我们需要一个singlechildscrollview。然后在列表视图中添加以下属性

 physics: NeverScrollableScrollPhysics(),
 shrinkWrap: true,

由于 SingleChildScrollView 正在滚动整个小部件，我们需要从列表视图中移除滚动。

下面是代码sn-p：

onTap: () {
                return showDialog<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      content: SizedBox(
                        width: double.maxFinite,
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Container(height: 150),
                              Container(height: 150),
                              Container(height: 150),
                              ListView(
                                physics: NeverScrollableScrollPhysics(),
                                shrinkWrap: true,
                                children: [
                                  Container(height: 150),
                                  Container(height: 500),
                                  Container(height: 500),
                                  Container(height: 500),
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              },

【讨论】：