Clip 组件.jpg
| 剪裁组件 | 裁剪行为 |
|---|---|
| ClipOval | 圆变矩或矩变圆 |
| ClipRRect | 剪裁为圆角矩形 |
| ClipRect | 剪裁掉溢出部分 |
| ClipPath | 自定义路径剪裁 |
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: LayoutWidget(),
));
}
class LayoutWidget extends StatefulWidget {
const LayoutWidget({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _LayoutState();
}
class _LayoutState extends State<LayoutWidget> {
@override
Widget build(BuildContext context) {
//头像
Widget avatar = Image.asset("assets/images/fox.jpg", width: 60.0);
return Scaffold(
appBar: AppBar(title: const Text("Clip 组件")),
body: Center(
child: Column(
children: [
//原始
avatar,
//剪裁为圆形
ClipOval(child: avatar),
//剪裁为圆角矩形
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: avatar,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
alignment: Alignment.topLeft,
//宽度缩放为原始宽度*0.5
widthFactor: 0.5,
child: avatar,
),
const Text(
"Flutter",
style: TextStyle(color: Colors.red),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//将溢出部分剪裁
ClipRect(
child: Align(
alignment: Alignment.topLeft,
//宽度缩放为原始宽度*0.5
widthFactor: 0.5,
child: avatar,
),
),
const Text("真好玩", style: TextStyle(color: Colors.blue))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRect(
clipper: CustomClipRect(12.0, 12.0, 12.0, 12.0),
child: Align(
alignment: Alignment.topLeft,
widthFactor: 0.5,
child: avatar,
),
),
const Text("真好玩", style: TextStyle(color: Colors.blue))
],
),
],
),
),
);
}
}
//自定义裁剪
class CustomClipRect extends CustomClipper<Rect> {
final double left;
final double top;
final double width;
final double height;
//裁剪指定区域
CustomClipRect(this.left, this.top, this.width, this.height);
@override
Rect getClip(Size size) => Rect.fromLTWH(left, top, width, height);
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
