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

ClipRect介绍

ClipRect 是给子组件裁剪为给定的矩形大小，默认状况下，ClipRect会阻止其子组件在边界之外进行会话，如果须要对子组件进行大小和地位的限定，那么还能够通过自定义裁剪门路。

示例代码

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

什么状况下应用ClipRect？

须要对子组件进行裁剪的时候咱们就应用ClipRect。

ClipRect的属性和阐明

ClipRect应用

ClipRect根本应用

咱们这里展现一张图片，用ClipRect进行包裹，当超出的局部将会被裁剪

import 'package:flutter/material.dart';import 'package:flutter_code/ClipRectExample/ClipperPath.dart';class ClipRectExample extends StatefulWidget {  @override  _ClipRectExampleState createState() => _ClipRectExampleState();}class _ClipRectExampleState extends State<ClipRectExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("ContainerExample"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          crossAxisAlignment: CrossAxisAlignment.center,          children: [            ClipRect(              child: Align(                alignment: Alignment.topLeft,                widthFactor: 0.5,                child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"),              ),            ),          ],        ),      ),    );  }}

成果展现

ClipRect自定义裁剪应用

第一步：定义自定义裁剪

import 'package:flutter/material.dart';class ClipperPath extends CustomClipper<Rect>{  @override  Rect getClip(Size size) {    return new Rect.fromLTRB(100, 10, size.width, size.height);  }  @override  bool shouldReclip(CustomClipper<Rect> oldClipper) {    return true;  }}

第二步：应用自定义裁剪

import 'package:flutter/material.dart';import 'package:flutter_code/ClipRectExample/ClipperPath.dart';class ClipRectExample extends StatefulWidget {  @override  _ClipRectExampleState createState() => _ClipRectExampleState();}class _ClipRectExampleState extends State<ClipRectExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("ClipRectExample"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          crossAxisAlignment: CrossAxisAlignment.center,          children: [            ClipRect(              /// 自定义裁剪门路              clipper: ClipperPath(),              child: Align(                alignment: Alignment.topLeft,                widthFactor: 1,                child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"),              ),            ),          ],        ),      ),    );  }}

成果展现

ClipRRect介绍

ClipRRect 是应用圆角矩形剪辑其子项的小部件，默认状况下，ClipRRect 应用本人的边界作为剪辑的根本矩形，但能够应用自定义剪辑器自定义剪辑的大小和地位。

什么状况下应用ClipRRect？

当须要对子组件进行圆角裁剪的时候能够用ClipRRect，当然还能够自定义裁剪。

ClipRRect的属性和阐明

ClipRRect应用

ClipRRect根本应用

这里咱们定义一个盒子的宽高是300，背景色彩是紫色，咱们ClipRRect进行包裹看下成果

import 'package:flutter/material.dart';import 'package:flutter_code/ClipRectExample/ClipperPath.dart';import 'package:flutter_code/ClipRectExample/ClipperRPath.dart';class ClipRectExample extends StatefulWidget {  @override  _ClipRectExampleState createState() => _ClipRectExampleState();}class _ClipRectExampleState extends State<ClipRectExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("ClipRectExample"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          crossAxisAlignment: CrossAxisAlignment.center,          children: [            ClipRRect(              borderRadius: BorderRadius.all(Radius.circular(20)),              child: Container(                color: Colors.purple,                width: 300,                height: 300,              )            ),          ],        ),      ),    );  }}

成果展现

ClipRRect自定义裁剪应用

第一步：定义自定义裁剪

import 'package:flutter/material.dart';class ClipperRPath extends CustomClipper<RRect>{  @override  RRect getClip(Size size) {    return RRect.fromRectAndCorners(      Rect.fromCenter(          center: Offset(100, 100),          width: 200,          height: 100      ),      topLeft: Radius.circular(50),      bottomRight: Radius.circular(50)    );  }  @override  bool shouldReclip(CustomClipper<RRect> oldClipper) {    return false;  }}

第二步：应用自定义裁剪

import 'package:flutter/material.dart';import 'package:flutter_code/ClipRectExample/ClipperPath.dart';import 'package:flutter_code/ClipRectExample/ClipperRPath.dart';class ClipRectExample extends StatefulWidget {  @override  _ClipRectExampleState createState() => _ClipRectExampleState();}class _ClipRectExampleState extends State<ClipRectExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("ClipRectExample"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          crossAxisAlignment: CrossAxisAlignment.center,          children: [            ClipRRect(              clipper: ClipperRPath(),              child: Container(                color: Colors.purple,                width: 300,                height: 300,              )            ),          ],        ),      ),    );  }}

成果展现

总结

本章咱们对ClipRect以及ClipRRect进行了解说，他们次要的性能都是对子组件进行裁剪，还能够自定义裁剪，如果只是须要对子组件进行圆角的裁剪，咱们应用ClipRRect就能够，因为它更加的简略。