Flutter 对组件进行裁剪

Flutter 中提供了一些剪裁函数，用于对组件进行剪裁。

剪裁                                                Widget作用

ClipOval            子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆

ClipRRect          将子组件剪裁为圆角矩形

ClipRect            剪裁子组件到实际占用的矩形大小（溢出部分剪裁）

图片如下：

代码如下：

import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

/*

* 裁剪 Clip 提供了一些裁剪函数，用于对组件进行裁剪

*/

class ClipPage extends StatefulWidget {

@override

  _ClipPageState createState() =>_ClipPageState();

}

class _ClipPageState extends State {

// 头像

  Widgetavatar =

Image.asset("assets/images/goods1.png", width:100.0, height:100.0);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar:AppBar(

        title:Text('裁剪'),

      ),

      body:Center(

        child:Column(

            children: [

            Container(

              margin:EdgeInsets.only(bottom:20),

              child:avatar,

            ),

            Container(

             margin:EdgeInsets.only(bottom:20),

              ///子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆

              child:ClipOval(child:avatar), //剪裁为圆形

            ),

            Container(

               margin:EdgeInsets.only(bottom:20),

              child:ClipRRect(

                ///将子组件剪裁为圆角矩形

                borderRadius:BorderRadius.circular(15.0),

                child:avatar,

              ),

            ),

            ///将溢出部分剪裁

            ClipRect(

            child:Align(

                alignment: Alignment.topLeft,

                widthFactor:.5, //宽度设为原来宽度一半

                child:avatar,

              ),

            ),

          ],

        ),

      ),

    );

  }

}