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,
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}