Flutter系列之自定义弹出dialog圆角

最新推荐文章于 2025-04-21 11:25:19 发布

Mr_tigerchou

最新推荐文章于 2025-04-21 11:25:19 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter开发文章标签： flutter dialog圆角

本文链接：https://blog.csdn.net/shving/article/details/108568538

Flutter开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍在Flutter中如何创建带有圆角的自定义Dialog。通过使用RoundedRectangleBorder和BoxDecoration，可以轻松地为Dialog添加圆角效果，提升UI美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter自定义dialog是调用showDialog方法，return 一个Dialog或者Dialog的子类，如AlertDialog。默认Dialog是直角，如果要实现一个圆角的dialog如何做呢？看下图：

实现方法：

在Dialog下加一个shape属性，然后布局的Container加一个圆角Decoration

showDialog(context: context, builder: (context){
      return Dialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(15))
        ),
        child: Container(
          height: 200,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: Colors.white
          ),
          padding: EdgeInsets.fromLTRB(15, 20, 15, 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('添加标签', style: TextStyle(color: Colors.black, fontSize: 16),),
              SizedBox(height: 20,),
              Container(
                height: 40,
                decoration: BoxDecoration(
                    color: Color(0xFFF6F6F6),
                    borderRadius: BorderRadius.all(Radius.circular(10))
                ),
              )
            ],
          ),
        ),
      );
    });