Flutter - 自动调整 AlertDialog 大小以适合列表内容

2024-04-08

我需要从休息网络服务动态加载列表城市,并让用户从警报对话框中选择一个城市。 我的代码:

createDialog() {

    fetchCities().then((response) {

      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Wybierz miasto'),
              content: Container(
                height: 200.0,
                width: 400.0,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: response.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Text(response[index].name),
                      onTap: () => citySelected(response[index].id),
                    );
                  },
                ),
              ),
            );
          }
      );
    });
  }

结果 - 对话框始终为 200x400,即使只有 2 个城市可用,底部仍留有不必要的空间:

如何使对话框的宽度/高度适合实际项目的大小?如果我承诺height and width参数,我遇到异常并且没有显示对话框。在原生 Android Java 中,我不需要指定任何尺寸,因为对话框会自动调整大小以适应。

如何修复我的代码以使对话框大小正确?注意:我不知道项目数,它是动态的。

[edit]

按照建议,我用列包装了内容:

createDialog() {
    fetchCities().then((response) {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Wybierz miasto'),
              content: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: response.length,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text(response[index].name),
                            onTap: () => citySelected(response[index].id),
                          );
                        },
                      ),
                    )
                  ]
              ),
            );
          }
      );
    });
  }

结果-异常:

I/flutter (5917): 渲染库捕获异常 ╞═══════════════════════════════════════ ══════════ ════════我/扑( [5917]: 在 PerformLayout() 期间抛出以下断言: I/flutter(5917):RenderViewport不支持返回内在 方面。 I/flutter (5917):计算内在维度 需要实例化视口的每个子级,这 I/flutter (5917):克服了懒惰的视口观点。

要测试的更通用代码:

showDialog(
       context: context,
       builder: (BuildContext context) {
         return AlertDialog(
           title: Text('Select city'),
           content: Column(
               mainAxisSize: MainAxisSize.min,
               children: <Widget>[
                 Container(
                   child: ListView.builder(
                     shrinkWrap: true,
                     itemCount: 2,
                     itemBuilder: (BuildContext context, int index) {
                       return ListTile(
                         title: Text("City"),
                         onTap: () => {},
                       );
                     },
                   ),
                 )
               ]
           ),
         );
       }
   );

包裹你的Container里面一个Column,在内容参数中,在其内部设置mainAxisSize.min,在列属性中

Container(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ...
    ],
  )
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter - 自动调整 AlertDialog 大小以适合列表内容 的相关文章

随机推荐