Flutter 剪裁組件的使用

更新時(shí)間：2021年06月23日 10:06:10 作者：ZeroFlutter

今天我們主要聊聊 Flutter 中的幾個(gè)剪裁組件的使用，也是項(xiàng)目當(dāng)中經(jīng)常可以用到的，希望你可以有所收獲

效果展示

在實(shí)際項(xiàng)目當(dāng)中我們經(jīng)常看到如下各種剪裁形狀的效果，F(xiàn)lutter 為我們提供了非常方便的 Widget 很輕松就可以實(shí)現(xiàn)，下面我們來(lái)一起看看吧

剪裁 Widget

ClipRRect（圓角矩形剪裁）

這里我們通過(guò) borderRadius 屬性就可以很方便的設(shè)置圓角半徑來(lái)實(shí)現(xiàn)圓角剪裁

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network(
    img1,
    height: height,
  ),
),

其他屬性

大概瞅一眼就可以看到 ClipRRect 的屬性就 5 個(gè)，這里我們需要調(diào)整的可能就 1~3 個(gè)

borderRadius 圓角半徑
clipper 自定義圓角矩形剪裁
clipBehavior 剪裁方式
- Clip.none 不剪裁
- Clip.hardEdge 不進(jìn)行抗鋸齒剪裁
- Clip.antiAlias 默認(rèn)-抗鋸齒剪裁
- Clip.antiAliasWithSaveLayer 抗鋸齒并且合成層剪裁（這種模式不僅有抗鋸齒，還分配一個(gè)離屏緩存，后續(xù)的剪裁都在緩沖區(qū)進(jìn)行）

其他形狀剪裁

這里我們通過(guò)設(shè)置四個(gè)角的 borderRadius 可以達(dá)到不同的形狀效果，下面就具體來(lái)看看

葉子形狀

ClipRRect(
  borderRadius: BorderRadius.only(
    // 設(shè)置左下角半徑為 40
    bottomLeft: Radius.circular(40),
    // 設(shè)置右上角半徑為 40
    topRight: Radius.circular(40),
  ),
  child: ...,
),

“狗屋”形狀

ClipRRect(
  borderRadius: BorderRadius.vertical(
    // 設(shè)置頂部半徑為 40
    top: Radius.circular(40),
    // 設(shè)置低部半徑為 10
    bottom: Radius.circular(10),
  ),
  child: ...,
),

更多創(chuàng)意效果等你來(lái)發(fā)揮

ClipOval（橢圓剪裁）

如果你的子組件是長(zhǎng)方形，那么剪裁出來(lái)就是一個(gè)橢圓形

ClipOval(
  child: Image.network(
    img1,
    // 僅設(shè)置了高度，原始圖片是長(zhǎng)方形
    height: height,
  ),
),

如果你的子組件是正方形，那么剪裁出來(lái)就是一個(gè)圓形

// 定義的寬高相等
var width = 100.0;
var height = 100.0;

ClipOval(
  child: Image.network(
    img1,
    width: width,
    height: height,
    // 縮放
    fit: BoxFit.cover,
  ),
),

其他屬性

這里只有 clipper、clipBehavior ，與上面 ClipRRect 的屬性意思相同，不過(guò)多說(shuō)明了

ClipRect（矩形剪裁）

這個(gè)很少用到，暫時(shí)沒(méi)有找到應(yīng)用場(chǎng)景，就不過(guò)多說(shuō)明了，你找到的話可以評(píng)論告訴我哦，我會(huì)及時(shí)更新上來(lái)的

ClipPath（路徑剪裁）

這個(gè)讓你發(fā)揮的自由度就更多了，比如 ⭐️五角星、❤️愛(ài)心、優(yōu)惠券卡片以及上面👆🏻所有的形狀都可以用路徑剪裁來(lái)實(shí)現(xiàn)，下面我們就實(shí)現(xiàn)一個(gè)底部曲線剪裁的效果

ClipPath(
  // 這里需要給 clipper 傳遞一個(gè) CustomClipper<Path> 
  clipper: ClipperPath(),
  child: Image.network(
    img1,
    height: height,
  ),
),

這里是創(chuàng)建曲線剪裁路徑，看了下面的代碼你就知道上面的其他剪裁 Widget 的 clipper 怎么使用了

下面代碼注釋非常詳細(xì)，仔細(xì)看哦

/// 創(chuàng)建剪裁路徑
class ClipperPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    // 連接到距離左上角3/4處
    path.lineTo(0.0, size.height / 2);
    // 第一個(gè)控制點(diǎn)
    var firstControlPoint = Offset(0, size.height);
    // 目標(biāo)點(diǎn)是底部中間點(diǎn)
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);
    // 第二個(gè)控制點(diǎn)
    var secondControlPoint = Offset(size.width, size.height);
    // 目標(biāo)點(diǎn)是右上角 3/4 處
    var secondPoint = Offset(size.width, size.height / 2);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);
    // 連接到右上角
    path.lineTo(size.width, 0.0);
    // 閉合
    path.close();
    // 返回剪裁路徑
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) =>
      oldClipper.hashCode != this.hashCode;
}

Tips：剪裁路徑的開(kāi)銷(xiāo)很大，對(duì)于某些形狀，建議選擇上面經(jīng)過(guò)優(yōu)化的 Widget 使用

做個(gè)優(yōu)化

聰明的你一定發(fā)現(xiàn)，我們通過(guò) ClipRRect 就可以實(shí)現(xiàn)這個(gè)效果，為啥還要寫(xiě)這么多代碼呢？來(lái)，看效果，上代碼

ClipRRect(
  borderRadius: BorderRadius.vertical(
    // 底部圓角半徑設(shè)置為 60
    bottom: Radius.circular(60),
  ),
  child: Image.network(
    img1,
    height: height,
  ),
),