Flutter深入浅出组件篇---ClipOval、ClipPath

ClipOval介绍

ClipOval是裁剪子组件为椭圆的组件，默认情况下，将轴对齐的椭圆内切到其布局尺寸中，并防止其子项在该椭圆外绘制，但可以使用自定义剪刀自定义剪辑椭圆的大小和位置。

示例代码

本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址

什么情况下使用ClipOval？

当我们需要对子组件进行椭圆裁剪时我们就用ClipOval，常用于圆角头像等。

ClipOval的属性和说明

字段	属性	描述
clipper	CustomClipper	自定义裁剪
clipBehavior	Clip	子组件边缘裁剪的方式，默认Clip.hardEdge
child	Widget	子组件

ClipOval使用

ClipOval基本使用

我们这里展示一张图片，用ClipOval进行包裹裁剪为椭圆，当超出的不飞粉将会被裁剪。

import 'package:flutter/material.dart';

class ClipOvalExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      backgroundColor: Colors.red.shade100,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipOval(
              /// 自定义裁剪路径
              // clipper: ClipperPath(),
              child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"),
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

ClipOval自定义裁剪使用

第一步：定义自定义裁剪类

import 'package:flutter/material.dart';

class ClipperOvalPath extends CustomClipper{
  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(50, 50, size.width - 20, size.height - 20);
  }

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

第二步：使用自定义裁剪

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipOvalExample/ClipperOvalPath.dart';

class ClipOvalExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      backgroundColor: Colors.red.shade100,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipOval(
              /// 自定义裁剪路径
              clipper: ClipperOvalPath(),
              child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"),
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

ClipPath介绍

ClipPath是可以使用路径裁剪，每当要绘制子组件时，对委托调用回调。 回调返回一个路径，并且子组件阻止在路径外绘画。

什么情况下使用ClipPath?

需要只做一些特殊的形状是，比如五角星，那我们就需要用ClipPath。

ClipPath的属性和说明

字段	属性	描述
clipper	CustomClipper	自定义裁剪
clipBehavior	Clip	子组件边缘裁剪的方式，默认Clip.hardEdge
child	Widget	子组件

ClipPath的基本使用

第一步：自定义裁剪类（五角星）

import 'dart:math';

import 'package:flutter/material.dart';

class ClipStarPath extends CustomClipper {
  ClipStarPath({this.scale = 2.5});

  final double scale;

  double perDegree = 36;

  /// 角度转弧度公式
  double degree2Radian(double degree) {
    return (pi * degree / 180);
  }

  @override
  Path getClip(Size size) {
    var R = min(size.width / 2, size.height / 2);
    var r = R / scale;
    var x = size.width / 2;
    var y = size.height / 2;

    var path = Path();
    path.moveTo(x, y - R);
    path.lineTo(x - sin(degree2Radian(perDegree)) * r,
        y - cos(degree2Radian(perDegree)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R,
        y - cos(degree2Radian(perDegree * 2)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r,
        y - cos(degree2Radian(perDegree * 3)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R,
        y - cos(degree2Radian(perDegree * 4)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r,
        y - cos(degree2Radian(perDegree * 5)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R,
        y - cos(degree2Radian(perDegree * 6)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r,
        y - cos(degree2Radian(perDegree * 7)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R,
        y - cos(degree2Radian(perDegree * 8)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r,
        y - cos(degree2Radian(perDegree * 9)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R,
        y - cos(degree2Radian(perDegree * 10)) * R);
    return path;
  }

  @override
  bool shouldReclip(ClipStarPath oldClipper) {
    return oldClipper.scale != this.scale;
  }
}

第二步：使用自定义裁剪

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipOvalExample/ClipStarPath.dart';

class ClipOvalExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      backgroundColor: Colors.red.shade100,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipPath(
              clipper: ClipStarPath(),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果展示

总结

ClipOval 主要是对子组件进行裁剪椭圆等效果，而当我们需要对一些子组件定义一些复杂的图形时，我们就需要用到ClipPath。