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

猜你喜欢

转载自blog.csdn.net/aikongmeng/article/details/129088668
今日推荐