Flutter中如何让showDialog弹窗内所有元素居中显示

你当前代码把图标、操作按钮全部放在了AlertDialog的actions属性中，这个属性默认是用来放置底部横向排列的操作按钮组，布局规则为子元素横向排列、靠右对齐，本身不会做居中处理；同时你把提示图标这类内容模块也错放在该属性下，自然会出现元素无法居中的问题。

• 将图标、提示文本、操作按钮全部迁移到content属性中，使用Column组件包裹所有内容
• 给Column设置mainAxisSize: MainAxisSize.min让弹窗高度适配内容，不要撑满可用空间
• 给Column设置crossAxisAlignment: CrossAxisAlignment.center，让所有内部子元素默认横向居中
• 用SizedBox控制不同模块之间的上下间距，匹配设计稿的视觉留白
• 修正原代码里的逻辑问题：按钮点击不要递归调用弹窗方法，先关闭当前弹窗再执行页面返回逻辑；如果按钮需要正常响应点击，把isEnabled设为true

修正后的可直接运行代码如下：

_showDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext ctx) {
      return AlertDialog(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15)),
        ),
        contentPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              Titles.serviceNotAvailable,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
            ),
            const SizedBox(height: 24),
            SvgPicture.asset(Img.simpleOrder),
            const SizedBox(height: 24),
            SizedBox(
              width: double.infinity,
              child: CustomElevatedButton(
                isDark: false,
                isEnabled: true,
                onPressed: () {
                  Navigator.pop(ctx);
                  // 此处编写返回服务选择页的业务逻辑
                },
                child: Text(
                  Titles.backToChoiceServices,
                  style: const TextStyle(
                    color: Colorz.primary,
                    fontSize: FontSize.small,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            )
          ],
        ),
      );
    },
  );
}

• 如果需要修改弹窗圆角、内边距，可以调整RoundedRectangleBorder的圆角参数、AlertDialog的contentPadding数值
• 如果需要调整元素之间的留白大小，修改对应SizedBox的height参数即可
• 如果文本过长出现溢出，可以给Text加maxLines和overflow属性处理截断

内容的提问来源于stack exchange，提问作者Andrii Havryliak