flutter dialog设置窗体宽度

Posted aikongmeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter dialog设置窗体宽度相关的知识,希望对你有一定的参考价值。

flutter dialog设置窗体宽度

AlertDialog 示例

首先,在 flutter 中 写一个 AlerDialog ,我们可以写一个StatelessWidget ,用一个 Container 来包裹一个 Dialog,下面是代码例子:

// Create a widget for the dialog content
class MyAlertDialog extends StatelessWidget 
  
  Widget build(BuildContext context) 
    return Container(
      width: 300.0, // set the width to 300.0
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('This is an alert dialog!'),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () 
              Navigator.pop(context);
            ,
            child: Text('Close'),
          ),
        ],
      ),
    );
  


调用显示对话框的方法:

// Call showDialog with the MyAlertDialog widget to show the dialog
void showAlertDialogWithWidth(BuildContext context) 
  showDialog(
    context: context,
    builder: (BuildContext context) 
      return AlertDialog(
        content: MyAlertDialog(),
      );
    ,
  );


设置窗体宽度

通常这个对话框会自带内容边距, 也就是默认的对话框样式,flutter的默认样式 ,我们从源代码查出左右间距40像素,
const EdgeInsets _defaultInsetPadding = EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0);

如果我们要修改这个宽度,可以设置 insetPadding ,重写这个默认值就行了

   insetPadding: const EdgeInsets.symmetric(horizontal: 25),
常见问题

如果设置了 insetPadding 不生效,那么通常是因为内容不够宽度,我们知道flutter中布局是’向下传递约束,向上传递尺寸’ ,所以只需要将 content 的宽度设置成屏幕的宽度即可。

width: MediaQuery.of(context).size.width

以上是关于flutter dialog设置窗体宽度的主要内容,如果未能解决你的问题,请参考以下文章

MFC中获取dialog窗体的宽度及大小等信息

Android_Dialog_设置Dialog窗体的大小

android Activity改成dialog样式后 怎么设置点击空白处关闭窗体,如图点击窗体意外的地方关闭窗体

WPF 之 设置Dialog的父窗体

[javaSE] GUI(对话框Dialog)

修改el-dialog的弹窗的宽度