Flutter 给控件加圆角

2019年5月8日 287次阅读 来源: 周南城

前言

今天有一小哥哥，想做一个带圆角的按钮，试了好几个，最后选择了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,
)

《Flutter 给控件加圆角》 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),
)

《Flutter 给控件加圆角》 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),
                  ),
                ),
              )

《Flutter 给控件加圆角》 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,
                ),
              ),

《Flutter 给控件加圆角》 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,
                  ),
                ),
              ),

《Flutter 给控件加圆角》 image

应该还有好多其他的办法的噢，如果你知道其他办法的话，可以评论告诉我噢

    原文作者：周南城
    原文地址: https://www.jianshu.com/p/00b0f2405eb5
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞