Flutter 剪裁处理

Flutter 剪裁处理(Clip)Clip组件的功能是把一个组件剪掉一部分。Flutter里有多个组件可以完成此类功能,如下所示:

  • ClipOval:圆形剪裁。
  • ClipRRect:圆角矩形剪裁。
  • ClipRect:矩形剪裁。
  • ClipPath:路径剪裁。

这几类剪裁组件都有两个共同属性,如下所示:
Flutter 剪裁处理

ClipOval(圆形剪裁)

圆形剪裁可以用来剪裁圆形头像,做一个类似Avatar的组件。示例代码如下所示:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval圆形剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              'ClipOval圆形剪裁示例',
              style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          // 圆形剪裁
          child: ClipOval(
              // 固定大小
              child: SizedBox(
                width: 300.0,
                height: 300.0,
                // 添加图片
                child: Image.asset(
                  "images/8.jpeg",
                  fit: BoxFit.fill,
                ),
              ),
          ),
        ),
      ),
    );
  }
}

上述示例代码的运行效果大致如图所示:
Flutter 剪裁处理

ClipRRect(圆角矩形剪裁)

ClipRRect这个组件用borderRadius参数来控制圆角的位置大小。示例代码如下所示:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipRRect圆角矩形剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              'ClipRRect圆角矩形剪裁示例',
              style: TextStyle(color: Colors.white),
              ),
            ),
            body: Center(
              // 圆角矩形
              child: ClipRRect(
                borderRadius: BorderRadius.all(
                    // 圆角弧度,值越大弧度越大
                    Radius.circular(30.0)),
                // 固定大小
                child: SizedBox(
                  width: 300.0,
                  height: 300.0,
                  child: Image.asset(
                    "images/8.jpeg",
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }

上述示例代码的运行效果大致如图所示:
Flutter 剪裁处理

ClipRect(矩形剪裁)

ClipRect组件需要自定义clipper属性才能使用,否则没有效果。自定义clipper需要继承CustomClipper类,并且需要重写getClip及shouldReclip两个方法。

完整的示例代码如下所示:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipRect矩形剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              'ClipRect矩形剪裁示例',
              style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          child: ClipRect(
              // 指定自定义Clipper
              clipper: RectClipper(),
              child: SizedBox(
                    width: 300.0,
                    height:300.0,
                    child: Image.asset("images/8.jp
                  ) ,
                ),
              ),
            ),
          );
      }
    }

    // 自定义Clipper,类型为Rect
    class RectClipper extends CustomClipper<Rect>

      // 重写获取剪裁范围
      @override
      Rect getClip(Size size) {
          return Rect.fromLTRB(100.0, 100.0, size.wid
      }

      // 重写是否重新剪裁
      @override
      bool shouldReclip(CustomClipper<Rect> oldCl
          return true;
      }

    }

上述示例代码的运行效果大致如图所示:
Flutter 剪裁处理

ClipPath(路径剪裁)

ClipPath这个组件采用了矢量路径path,所以可以把组件剪裁为任意类型的形状,比如三角形、矩形、星形及多边形等。自定义clipper需要继承CustomClipper类,并且需要重写getClip及shouldReclip两个方法。

完整的示例代码如下所示:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipPath路径剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              'ClipPath路径剪裁示例',
              style: TextStyle(color: Colors.white),
          ),
        ),
            body: Center(
              child: ClipPath(
                clipper: TriangleCliper(), //指定自定义三角形Clipper
                child: SizedBox(
                  width: 100.0,
                  height:100.0,
                  child: Image.asset("images/8.jpeg",fit: BoxFit.fill,),
                ) ,
              ),
            ),
          ),
        );
      }
    }

    // 自定义三角形Clipper,类型为Path
    class TriangleCliper extends CustomClipper<Path>{
      // 重写获取剪裁范围
      @override
      Path getClip(Size size) {
        Path path = Path();
        path.moveTo(50.0,50.0); //移动至起始点
        path.lineTo(50.0,10.0); //开始画线,起始点为(50.0,
                                  // 50.0),终止点(50.0,10.0)
        path.lineTo(100.0,50.0); //开始画线,起始点为(50.0,
                                  // 10.0),终止点(100.0,50.0)
        path.close();              //使这些点构成三角形
        return path;
      }
      // 重写是否重新剪裁
      @override
      bool shouldReclip(TriangleCliper oldClipper) {
        return true;
      }
    }

上述示例代码的运行效果大致如图所示:
Flutter 剪裁处理

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!