Flutter-自动调整大小警报对话框以适合列表内容 [英] Flutter - auto size alertDialog to fit list content

问题描述

我需要从其余Web服务动态加载列表城市，并让用户从警报对话框中选择一个城市.我的代码:

I need to load list cities dynamically from rest webservice and let user choice one city from alert dialog. My code:

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个城市可用，底部也没有多余的空间:

Result - dialog is always 200x400, even if only 2 cities are available, there is unnecesary room left at the bottom:

如何使对话框宽度/高度适合实际项目大小?如果我省略了 height 和 width 参数，则表示异常，并且未显示任何对话框.在本机Android Java中，我不需要指定任何尺寸，因为对话框本身会自动调整大小.

How to make dialog width/height to fit actual items size? If I ommit height and width parameters, I'm getting exception and no dialog shown. In native Android Java I never need to specify any dimensions, because dialog sizes itself automatically to fit.

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

How to fix my code to get dialog sized correctly? Note that I don't know item count, it's dynamic.

按照建议，我用列包裹了内容:

As suggested, I wrapped content with column:

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):打破了视口变得懒惰的观点.

I/flutter ( 5917): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5917): The following assertion was thrown during performLayout(): I/flutter ( 5917): RenderViewport does not support returning intrinsic dimensions. I/flutter ( 5917): Calculating the intrinsic dimensions would require instantiating every child of the viewport, which I/flutter ( 5917): defeats the point of viewports being lazy.

更多要测试的通用代码:

More generic code to test:

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 包裹在列内的内容参数器中，在其中设置 mainAxisSize.min ，在列"属性中

Wrap your Container inside a Column, in the content paramenter, inside of it, set the mainAxisSize.min, in Column property

这篇关于Flutter-自动调整大小警报对话框以适合列表内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！