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,

              ),

            ),

          ],

        ),

      ),

    );

  }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容