首页 专题 H5案例 前端导航 UI框架

Flutter - 裁剪组件大全(ClipRect、ClipRRect、ClipOval、ClipPath)

作者:TG 日期: 2020-05-19 字数: 7394 阅读: 631

在Flutter中,提供了不少裁剪组件,可以帮助我们实现不同形状的组件,当然,如果需要特殊的形状,那就需要自定义裁剪组件了。

ClipRect - 矩形裁剪

ClipRect组件使用矩形裁剪子组件。通常情况下,ClipRect用于Center、Align、OverflowBox、CustomPaint、CustomSingleChildLayout、CustomMultiChildLayout组件。

  • Center(
  • child: ClipRect(
  • child: Image.network(
  • 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
  • fit: BoxFit.cover,
  • width: 100,
  • height: 50,
  • ),
  • ),
  • )

原图:

裁剪效果:

ClipRRect - 圆角矩形裁剪

ClipRRect组件使用圆角矩形裁剪子组件,默认圆角半径为0.

  • Center(
  • child: ClipRRect(
  • borderRadius: BorderRadius.circular(20),
  • child: Image.network(
  • 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
  • fit: BoxFit.cover,
  • width: 100,
  • height: 100,
  • ),
  • ),
  • )

效果图:

ClipOval - 椭圆形裁剪

ClipOval组件使用椭圆形裁剪子组件,如父组件为正方形,裁剪出来的是圆形。

椭圆形:

  • Center(
  • child: ClipOval(
  • child: Image.network(
  • 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
  • fit: BoxFit.cover,
  • width: 100,
  • height: 50,
  • ),
  • ),
  • )

效果图:

圆形:

  • Center(
  • child: ClipOval(
  • child: Image.network(
  • 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
  • fit: BoxFit.cover,
  • width: 100,
  • height: 100,
  • ),
  • ),
  • )

效果图:

ClipPath - 自定义裁剪

ClipPath组件允许我们自定义路径来对子组件进行裁剪。

绘制三角形

首先,我们需要定义裁剪对形状,使用CustomClipper类。

三角形组件:

  • import 'package:flutter/material.dart';
  • class TriangleClipper extends CustomClipper<Path> {
  • @override
  • Path getClip(Size size) {
  • final path = Path()
  • ..moveTo(0.0, size.height)
  • ..lineTo(size.width, size.height)
  • ..lineTo(size.width / 2, size.height / 2)
  • ..close();
  • return path;
  • }
  • @override
  • bool shouldReclip(CustomClipper<Path> oldClipper) => false;
  • }

裁剪子组件:

  • ClipPath(
  • clipper: TriangleClipper(),
  • child: Image.network(
  • 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
  • fit: BoxFit.cover,
  • width: 100,
  • height: 100,
  • ),
  • )

效果图:

clipper参数定义裁剪规则,也可以说裁剪路径
clipBehavior参数定义裁剪对方式:

  • none:不裁剪
  • hardEdge:裁剪但不应用抗锯齿
  • antiAlias:裁剪且应用抗锯齿,此方式看起来会更平滑,通常用于处理圆形和弧形裁剪
  • antiAliasWithSaveLayer:裁剪、应用抗锯齿且有一个缓冲区,此方式裁剪很慢。

注意:但子组件没有超出父组件但范围时,不会发生裁剪,也不会产生任何性能消耗。

目录