Flutter AlertDialog中Column占满屏幕问题求助

嘿，我完全懂你遇到的这个困扰——AlertDialog里的Column莫名其妙撑满整个屏幕，哪怕移除了容器组件也没用，对吧？

其实问题出在Column的默认行为上：Column默认会尽可能占据父组件提供的所有垂直空间，而AlertDialog的content区域并没有限制高度，所以就导致Column直接拉满了整个屏幕。

解决这个问题很简单，只需要给Column添加一个mainAxisSize: MainAxisSize.min属性，这个属性会让Column只占用它的子组件实际需要的垂直空间，不会过度拉伸。

下面是修改后的代码片段：

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Text('Ajouter un ingrédient'),
            content: Column(
                // 关键属性：让Column仅占用子组件所需空间
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                    DropDownButtonIngredients(),
                    TextField(
                        autofocus: false,
                        decoration: InputDecoration(
                            labelText: 'Nom',
                            hintText: 'Frite, Steak, Salade ...'),
                        onChanged: (value) {
                            newIngr = value;
                        },
                    ),
                ],
            ),
            actions: <Widget>[
                FlatButton(
                    child: Text('Ok'),
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                ),
            ],
        );
    },
);

另外，你之前移除容器组件没用是因为容器本身不会导致拉伸问题，核心还是Column的默认布局逻辑。如果之后你的content里有更多内容，担心会超出屏幕，还可以把Column用SingleChildScrollView包裹，这样就能滚动查看所有内容啦。

内容的提问来源于stack exchange，提问作者Aymeric Le Feyer