フラッターコンテナクラスコンポーネント：トリミング（クリップ）

序文

フラッターは、コンポーネントをトリミングするために、いくつかのトリミング機能を提供します。

カットウィジェット	効果
ClipOval	内側の円に固定されたサブアセンブリにカット長方形は、内側楕円ペーストに合わせて調整され、正方形であります
ClipRRect	サブアセンブリは、丸みを帯びた長方形を切断し
clipRect	矩形の大きさに切断サブアセンブリ実際に占有（オーバーフロー部カット）

インターフェイス説明

const ClipOval({ Key key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget child }) : super(key: key, child: child);

const ClipRRect({
    Key key,
    this.borderRadius,
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    Widget child,
  }) : assert(borderRadius != null || clipper != null),
       assert(clipBehavior != null),
       super(key: key, child: child);

const ClipRect({ Key key, this.clipper, this.clipBehavior = Clip.hardEdge, Widget child }) : super(key: key, child: child);

サンプルコード

// 剪裁 clip

// 剪裁Widget    作用
// ClipOval      子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
// ClipRRect       将子组件剪裁为圆角矩形
// ClipRect      剪裁子组件到实际占用的矩形大小（溢出部分剪裁）

import 'package:flutter/material.dart';

class ClipTest extends StatelessWidget {

  @override
  Widget build(BuildContext context)  {
    // 头像
    Widget avatar = Image.asset('assets/images/avatar.png', width: 60,);
    return Scaffold(
      appBar: AppBar(
        title: Text('剪裁'),
      ),
      body: Column(
        children: <Widget>[
          // 不裁剪
          avatar,
          // 裁剪为圆形
          ClipOval(child: avatar,),
          // 裁剪为圆角矩形
          ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: avatar,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                // 宽度设为原来的一半，另一半会溢出
                widthFactor: .5,
              ),
              Text('Hello world!', style: TextStyle(color: Colors.green),)
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 将溢出部分剪裁
              ClipRect(
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: .5,
                  child: avatar,
                ),
              ),
              Text('Hello world!', style: TextStyle(color: Colors.green),)
            ],
          ),
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
            child: ClipRect(
              // 使用自定义的clipper
              clipper: MyClipTest(),
              child: avatar,
            ),
          )
        ],
      ),
    );
  }
}


// 自定义剪裁
class MyClipTest extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}

概要

カットは、レイアウトが完了した後、図面段階で作られ、それは、部品の大きさに影響を与え、そしてこの原理は似て変換しません。