Flutter元件之ClipRRect簡單使用

FaKeng發表於2020-04-16
Flutter元件

在flutter中Container生成圓角形狀的程式碼如下：

Container(,
    width:200,
    height:200,
    decoration: BoxDecoration(
        border: Border.all(color:Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    )
)
複製程式碼

效果圖如下:

Flutter元件之ClipRRect簡單使用

當巢狀一個圖片時，圖片並不尊重Container的圓角形狀，直接以長方形撐破了Container，顯示效果不好，程式碼如下：

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: Image.network(
        "https://user-gold-cdn.xitu.io/2020/4/16/171818a272f1dbc8?w=2000&h=1060&f=jpeg&s=266199",
        fit: BoxFit.cover,
    ),
)
複製程式碼

效果為:

Flutter元件之ClipRRect簡單使用

此時，只需要將child套在ClipRRect中，將切割半徑設為Container的圓角半徑即可。程式碼如下：

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: ClipRRect(
        borderRadius: BorderRadius.circular(50),
        child: Image.network(
          "https://user-gold-cdn.xitu.io/2020/4/16/171818a272f1dbc8?w=2000&h=1060&f=jpeg&s=266199",
          fit: BoxFit.cover,
        ),
     ),
![](https://user-gold-cdn.xitu.io/2020/4/16/1718198a7307f765?w=552&h=480&f=png&s=182478)
)
複製程式碼

效果圖為:

Flutter元件之ClipRRect簡單使用

當然也可以設定borderRadius四個角的切割，以滿足不同的需求。

borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomRight: Radius.circular(50)),
複製程式碼

效果如下:

Flutter元件之ClipRRect簡單使用

這就是ClipRRect的簡單用法，謝謝觀看。

相關文章