AlertDialog

AlertDialog

AlertDialog 是一个用于向用户传递信息的弹出层。其构造：

const AlertDialog({
   super.key,
   this.icon,//图标
   this.iconPadding,//图标添加填充
   this.iconColor,//图标颜色
   this.title,//标题
   this.titlePadding,//标题添加填充
   this.titleTextStyle,//标题样式
   this.content,//内容
   this.contentPadding,//内容添加填充
   this.contentTextStyle,//内容样式
   this.actions,//操作按钮组合
   this.actionsPadding,//操作按钮组合添加填充
   this.actionsAlignment,//操作按钮组合排列方式
   this.actionsOverflowAlignment,
   this.actionsOverflowDirection,//属性将指定如何在列上对它们进行排序，从上到下(默认)或从下到上
   this.actionsOverflowButtonSpacing,//指定垂直方向上的动作之间的空间
   this.buttonPadding,
   this.backgroundColor,//对话框背景颜色
   this.elevation,//对话框阴影
   this.semanticLabel,//对话框语义化标签
   this.insetPadding = _defaultInsetPadding,
   this.clipBehavior = Clip.none,
   this.shape,//对话框形状
   this.alignment,
   this.scrollable = false,
 }) 

常见列子:

ElevatedButton(
   onPressed: (){
     showDialog(
         context: context,
         builder: (BuildContext context){
           return  AlertDialog(
             icon: const Icon(Icons.ac_unit_sharp),
             title: const Text('AlertDialog'),
             content: const Text('我是AlertDialog对话框'),
             actions: [
               ElevatedButton(onPressed: (){Navigator.of(context).pop();}, child: const Text('确定')),
               ElevatedButton(onPressed: (){Navigator.of(context).pop();}, child: const Text('取消'))
             ],
           );
         }
     );
   },
   child: const Text('AlertDialog')
)

Dialog 添加一些个性化，actions 按钮个数最多可设置三个。

ElevatedButton(
    onPressed: (){
      showDialog(
          context: context,
          builder: (BuildContext context){
            return  AlertDialog(
              icon: const Icon(Icons.ac_unit_sharp),//图标
              title: const Text('AlertDialog'),
              titlePadding: const EdgeInsets.all(20),
              titleTextStyle: const TextStyle(color: Colors.red,fontSize: 20,fontWeight: FontWeight.bold),
              content: const Text('我是AlertDialog对话框'),
              contentPadding: const EdgeInsets.all(40),
              contentTextStyle: const TextStyle(color: Colors.black,fontSize: 16),
              backgroundColor: Colors.grey,
              elevation: 10.0,
              actionsOverflowDirection: VerticalDirection.down,
              shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
              actions: [
                TextButton(onPressed: (){Navigator.of(context).pop();}, child: const Text('确定')),
                TextButton(onPressed: (){Navigator.of(context).pop();}, child: const Text('取消'))
              ],
            );
          }
      );
    },
    child: const Text('AlertDialog')
)

Dialog 默认宽度是固定的，高度也有最大限度，若元素大小超过最大宽高则会溢出；AlertDialog 可以自由设置点击事件，并非只有 actions 设置。

ElevatedButton(
    onPressed: (){
      showDialog(
          context: context,
          builder: (context){
            return AlertDialog(
              title: Row(children: const [
                Padding(
                  padding: EdgeInsets.only(left: 12.0),
                  child: Text('Alert List'),
                )
              ],),
              //content: Text("1111111"),
              content: ListView.builder(
                  itemCount: 20,
                  itemBuilder: (BuildContext context, int index){
                    return ListTile(
                      title: Text('index = $index'),
                      //onTap: (){Navigator.of(context).pop(index);},
                    );
                  }
              ),
              elevation: 8.0,
              shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15.0))),
            );
          }
      );
    },
    child: const Text('AlertDialog2')
)