Flutter 给控件加圆角

最新推荐文章于 2024-12-20 16:54:21 发布

barnett_y

最新推荐文章于 2024-12-20 16:54:21 发布

阅读量982

点赞数 2

分类专栏：【Flutter点滴知识】

【Flutter点滴知识】专栏收录该内容

397 篇文章

订阅专栏

博客记录了给控件和图片加圆角的解决办法。有一小哥哥想做带圆角的按钮，最终选择iOS风格。文中介绍了三种方法，包括在控件外层嵌套、使用装饰器、用裁剪控件等，还提及图片圆角有锯齿及正圆图片的实现等情况。

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

前言

今天有一小哥哥，想做一个带圆角的按钮，试了好几个，最后选择了iOS风格的CupertinoButton，是因为其他Button，好像都不能直接设置radius。我其实当时学习其他控件的时候也想过设置圆角这事儿来着。今天偶然看到了一个解决办法，还顺便解决了我一直想给图片加圆角的问题，以下做个笔记

直接上代码

方法一

在你要加圆角的控件外层嵌套一层new Material

比如

RaisedButton

new Material(
    child: new RaisedButton(
        onPressed: () {},
        color: Colors.red[300],
        child: new Text(
            "RaisedButton",
            style: new TextStyle(color: Colors.white),
            ),
        ),
    borderRadius: BorderRadius.circular(20.0),
    shadowColor: Colors.grey,
    elevation: 5.0,
)

image

Image

new Material(
    child: new Image(
        image: new NetworkImage(//从网络加载图片并缓存在内存中
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3882265467,3924971696&fm=27&gp=0.jpg"),
        width: 200.0,
        height: 200.0,
        fit: BoxFit.cover,
    ),
    borderRadius: BorderRadius.circular(80.0),
)

image

不过图片的圆角好像有锯齿啊，疑惑。。。。还有就是，如果你想要一个正圆的图片的话可以直接用CircleAvatar的哟。然后如果你还想改按钮的尺寸（好像在源码中没有看到可以修改尺寸的属性）的话，在外层嵌套一个new SizedBox即可

方法二

使用装饰器

比如

Container(
                width: 300.0,
                height: 150.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/illustration_16.jpg"),
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(10.0),
                  ),
                ),
              )

image

正圆除了用CircleAvatar实现，shape也是可以实现的：

Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                      'assets/images/illustration_17.jpg',
                    ),
                    //从Assets加载图片
                    fit: BoxFit.cover,
                  ),
                  shape: BoxShape.circle,
                ),
              ),

image

方法三

说到裁剪图片，其实还可以使用ClipOval控件哦

正圆

ClipOval(
                child: SizedBox(
                  width: 200.0,
                  height: 200.0,
                  child: Image(
                    image: AssetImage(
                      'assets/images/illustration_13.jpg',
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

椭圆

ClipOval(
                child: SizedBox(
                  width: 350.0,
                  height: 180.0,
                  child: Image(
                    image: AssetImage(
                      'assets/images/illustration_13.jpg',
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),