弹窗

108 阅读1分钟

Flutter 的原生弹窗比较简单,其内部实现暂未深究,只做简单使用汇总

ShowDialog

image.png

showDialog(

    //点击屏障时自动消除
    //false时安卓手机实体返回键依然可以返回
    barrierDismissible: true,
    barrierColor: Colors.orange.withOpacity(0.3),
    context: context,
    builder: (context) {
        return Align(
            alignment: Alignment.center,
            child: Container(color: Colors.red,width: 210,height: 100,),
         );
   },

);

AlertDialog

image.png

AlertDialog(

    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
    elevation: 10,

    icon: Icon(Icons.tiktok),
    title: Text("标题"),
    content: Text("内容文字"),

    actions: [

        TextButton(
          onPressed: () { Navigator.pop(context); },
          child: Text("确认"),

        ),

        TextButton(
          onPressed: () {},
          child: Text("取消"),
        ),

        TextButton(
          onPressed: () {},
          child: Text("选项"),
        ),
    ],

);

SimpleDialog

image.png

SimpleDialog(

    title: const Text("选择标题"),

    children: [

        SimpleDialogOption(onPressed: () {}, child: Text("选项一")),

        SimpleDialogOption(onPressed: () {}, child: Text("选项二")),

        SimpleDialogOption(onPressed: () {}, child: Text("选项三")),

        SimpleDialogOption(onPressed: () {}, child: Text("选项四")),

    ],

);

showModalBottomSheet

image.png


showModalBottomSheet(

    context: context,

    builder: (context) {

        return Container(

            height: 300,
            width: double.infinity,
            child: Center(
                child: TextButton(onPressed: ()=>Get.back(),child: Text("aaaa"),)
             ),
        );
   },

);