前言

今天有一小哥哥，想做一個帶圓角的按鈕，試了好幾個，最后選擇了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(//從網(wǎng)絡加載圖片并緩存在內存中
            "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實現(xiàn)，shape也是可以實現(xiàn)的：

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,
                  ),
                ),
              ),

image

應該還有好多其他的辦法的噢，如果你知道其他辦法的話，可以評論告訴我噢