Flutter组件学习（16）Clip

介绍

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

剪裁Widget	作用
ClipOval	子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
ClipRRect	将子组件剪裁为圆角矩形
ClipRect	剪裁子组件到实际占用的矩形大小（溢出部分剪裁）
CustomClipper	剪裁子组件的特定区域

 Demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('裁剪练习'),
          textTheme:
          TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),
          backgroundColor: Colors.red,
        ),
        body: ClipTest(),
      ),
    );
  }
}

class ClipTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Widget widget=Image.network(
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591175847643&di=6e41a32b6e6355aacbfae14d03439a83&imgtype=0&src=http%3A%2F%2Fimgwx4.2345.com%2Fdypcimg%2Fdongman%2Fimg%2F2%2F25%2Fsup75205_223x310.jpg',
      height: 100,
      width: 100,
      fit: BoxFit.fill,
    );

    Widget widget2=Image.network(
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591175847643&di=6e41a32b6e6355aacbfae14d03439a83&imgtype=0&src=http%3A%2F%2Fimgwx4.2345.com%2Fdypcimg%2Fdongman%2Fimg%2F2%2F25%2Fsup75205_223x310.jpg',
      height: 100,
      width: 200,
      fit: BoxFit.fill,
    );

    return Center(
      child: Column(
        children: [
          widget,//不裁剪

          ClipOval(
            child: widget,//子组件为正方形时剪裁为内贴圆形
          ),

          ClipOval(
            child: widget2,//子组件为矩形时，剪裁为内贴椭圆
          ),

          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: widget,//子组件剪裁为圆角矩形
          ),

          ClipRect(
            child: Align(
              widthFactor: .5,//宽度设为原来宽度一半
              alignment: Alignment.center,
              child: widget,
            ),//剪裁子组件到实际占用的矩形大小
          ),

          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.blue
            ),

            child: ClipRect(
              child: widget,
              clipper: CustomClipperTest(),
            ),
          ),
        ],
      ),
    );
  }
}

class CustomClipperTest extends CustomClipper {
  @override
  getClip(Size size) {
    return Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }

}