Flutter裁剪Clip

Flutter中提供了一些剪裁函数，用于对组件进行剪裁。

ClipOval

子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆

ClipRRect

将子组件剪裁为圆角矩形

ClipRect

剪裁子组件到实际占用的矩形大小（溢出部分剪裁）

例

import 'package:flutter/material.dart';

class StudyClip extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget treeWidget = Image.asset("images/tree.jpg",width: 80,height: 80,fit: BoxFit.cover,);
    return Scaffold(
      appBar: AppBar(
        title: Text("Clip"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,

        children: <Widget>[
          treeWidget,//不裁剪
          ClipOval(//圆形
            child: treeWidget,
          ),
          ClipRRect(//圆角矩形
            borderRadius: BorderRadius.circular(10),
            child: treeWidget,
          ),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRect(//将溢出部分裁剪
                child: Align(
                  alignment: Alignment.topLeft,
                  child: treeWidget,
                  widthFactor: 0.5,//宽度设为原来的一半
                ),
              ),
              Text("百舸争流"),
            ],
          ),
        ],
      ),
    );
  }

}

效果

CustomClipper自定义裁剪区域

自定义一个CustomClipper

class MyClip extends CustomClipper<Rect>{
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 10, 30, 30);//距离左边0  距离顶部10 裁剪宽和高位30的区域
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    return false;
  }

}

getClip()是用于获取剪裁区域的接口

shouldReclip() 接口决定是否重新剪裁。如果剪裁区域始终不会发生变化时应该返回false，这样就不会触发重新剪裁

使用

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.green,
  ),
  child: ClipRect(
    clipper: MyClip(),
    child: treeWidget,
  ),
),

展示效果，距离左边0 距离顶部10 裁剪宽和高位30的区域就出来了。但图片所占用的空间大小并不会改变。