Clip 组件

Clip 组件.jpg

剪裁组件	裁剪行为
ClipOval	圆变矩或矩变圆
ClipRRect	剪裁为圆角矩形
ClipRect	剪裁掉溢出部分
ClipPath	自定义路径剪裁

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    //头像
    Widget avatar = Image.asset("assets/images/fox.jpg", width: 60.0);

    return Scaffold(
      appBar: AppBar(title: const Text("Clip 组件")),
      body: Center(
        child: Column(
          children: [
            //原始
            avatar,
            //剪裁为圆形
            ClipOval(child: avatar),
            //剪裁为圆角矩形
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: avatar,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  //宽度缩放为原始宽度*0.5
                  widthFactor: 0.5,
                  child: avatar,
                ),
                const Text(
                  "Flutter",
                  style: TextStyle(color: Colors.red),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                //将溢出部分剪裁
                ClipRect(
                  child: Align(
                    alignment: Alignment.topLeft,
                    //宽度缩放为原始宽度*0.5
                    widthFactor: 0.5,
                    child: avatar,
                  ),
                ),
                const Text("真好玩", style: TextStyle(color: Colors.blue))
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ClipRect(
                  clipper: CustomClipRect(12.0, 12.0, 12.0, 12.0),
                  child: Align(
                    alignment: Alignment.topLeft,
                    widthFactor: 0.5,
                    child: avatar,
                  ),
                ),
                const Text("真好玩", style: TextStyle(color: Colors.blue))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

//自定义裁剪
class CustomClipRect extends CustomClipper<Rect> {
  final double left;
  final double top;
  final double width;
  final double height;

  //裁剪指定区域
  CustomClipRect(this.left, this.top, this.width, this.height);

  @override
  Rect getClip(Size size) => Rect.fromLTWH(left, top, width, height);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}