flutter dialog设置窗体宽度

Posted 2023-03-04 aikongmeng

flutter dialog设置窗体宽度

• • • • AlertDialog 示例
      • • 设置窗体宽度
        • 常见问题

AlertDialog 示例

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

// Create a widget for the dialog content
class MyAlertDialog extends StatelessWidget 
  @override
  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