关于flutter:Flutter深入浅出组件篇ClipOvalClipPath

ClipOval介绍

ClipOval是裁剪子组件为椭圆的组件，默认状况下，将轴对齐的椭圆内切到其布局尺寸中，并避免其子项在该椭圆外绘制，但能够应用自定义剪刀自定义剪辑椭圆的大小和地位。

示例代码

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

什么状况下应用ClipOval？

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

ClipOval的属性和阐明

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<Rect>{  @override  Rect getClip(Size size) {    return Rect.fromLTRB(50, 50, size.width - 20, size.height - 20);  }  @override  bool shouldReclip(CustomClipper<Rect> 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的属性和阐明

ClipPath的根本应用

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

import 'dart:math';import 'package:flutter/material.dart';class ClipStarPath extends CustomClipper<Path> {  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。