乐趣区

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

jiezi

ClipRect 介绍

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

示例代码

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

什么状况下应用 ClipRect？

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

ClipRect 的属性和阐明

字段 属性 形容
clipper CustomClipper<Rect> 自定义裁剪
clipBehavior Clip 子组件边缘裁剪的形式，默认 Clip.hardEdge
child Widget 子组件

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 的属性和阐明

字段 属性 形容
borderRadius BorderRadius 裁剪的边框大小
clipper CustomClipper<RRect> 自定义裁剪器
clipBehavior Clip 子组件边缘裁剪的形式，默认 Clip.hardEdge
child Widget 子组件

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 就能够，因为它更加的简略。

退出移动版