| Flutter Clip 裁剪 |
|---|
totem_four_logo.jpg
|
| :- |
1、目录
- 1、裁剪三角形
- 2、裁剪椭圆形
- 3、裁剪圆弧形
2、效果
| 效果图 |
|---|
totem_four_logo.jpg
|
| :- |
3、代码实现
class MainWavePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MainWaveState();
}
}
class _MainWaveState extends State<MainWavePage> {
static const double min = 2;
static const double max = 30;
double _slideValue = min + 1;
int _slideDivisions = (max - min).toInt();
int _waveCount = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wave"),
),
body: Column(
children: <Widget>[
Spacer(),
Spacer(),
Slider(
value: _slideValue,
min: min,
max: max,
divisions: _slideDivisions,
label: "$_waveCount",
onChanged: (double value) {
setState(() {
_slideValue = value;
_waveCount = value.toInt();
});
},
),
Divider(),
Spacer(),
Container(
width: MediaQuery.of(context).size.width,
height: 50,
child: ClipPath(
key: GlobalKey(),
clipBehavior: Clip.antiAlias,
clipper:
WaveTriangleClipper(waveCount: _waveCount, isReverse: false),
child: BlueGradient(),
),
),
Divider(),
Spacer(),
Container(
width: MediaQuery.of(context).size.width,
height: 50,
child: ClipPath(
key: GlobalKey(),
clipBehavior: Clip.antiAlias,
clipper: WaveOvalClipper(waveCount: _waveCount, isReverse: false),
child: BlueGradient(),
),
),
Divider(),
Spacer(),
Container(
width: MediaQuery.of(context).size.width,
height: 50,
child: ClipPath(
key: GlobalKey(),
clipBehavior: Clip.antiAlias,
clipper: WaveArcClipper(waveCount: _waveCount, isReverse: false),
child: BlueGradient(),
),
),
Divider(),
Spacer(),
Spacer(),
],
),
);
}
}
class BlueGradient extends StatelessWidget {
final overlayHeight = 50.0;
@override
Widget build(BuildContext context) {
return Container(
height: overlayHeight,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.blue,
Colors.blue.withOpacity(0.25),
],
),
),
);
}
}
- 1、裁剪三角形
import 'package:flutter/material.dart';
/// WaveTriangleClipper
///
/// 三角形效果的
class WaveTriangleClipper extends CustomClipper<Path> {
int _count;
bool _isReverse;
WaveTriangleClipper({
int waveCount,
bool isReverse = false,
}) {
_count = waveCount;
_isReverse = isReverse;
}
@override
Path getClip(Size size) {
var path = Path();
var _segment = _count * 2;
double pieceOfWidth = size.width / _segment;
double pieceOfHeight = size.height;
if (_isReverse) {
path.moveTo(0, 0);
} else {
path.moveTo(0, pieceOfHeight);
}
for (int i = 0; i < _segment; i++) {
double y = 0.0;
if (_isReverse) {
if (i % 2 == 1) {
y = 0;
} else {
y = pieceOfHeight;
}
} else {
if (i % 2 == 1) {
y = pieceOfHeight;
} else {
y = 0;
}
}
path.lineTo(pieceOfWidth * (i + 1), y);
}
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
- 2、裁剪椭圆形
import 'package:flutter/material.dart';
/// WaveOvalClipper
///
/// 椭圆效果的
class WaveOvalClipper extends CustomClipper<Path> {
int _count;
bool _isReverse;
WaveOvalClipper({
int waveCount,
bool isReverse = false,
}) {
_count = waveCount;
_isReverse = isReverse;
}
@override
Path getClip(Size size) {
var path = Path();
var _segment = _count * 2;
double pieceOfWidth = size.width / _segment;
double pieceOfHeight = size.height;
if (_isReverse) {
path.moveTo(0, 0);
} else {
path.moveTo(0, pieceOfHeight);
}
for (int i = 0; i < _segment; i++) {
double y = 0.0;
double left;
double top;
double right;
double bottom;
double startAngle;
double sweepAngle;
if (_isReverse) {
if (i % 2 == 1) {
y = 0;
left = pieceOfWidth * i;
top = y;
} else {
y = pieceOfHeight;
left = pieceOfWidth * i;
top = y;
}
} else {
if (i % 2 == 1) {
y = pieceOfHeight;
left = pieceOfWidth * i;
top = y;
startAngle = 180;
sweepAngle = -45;
} else {
y = 0;
left = pieceOfWidth * i;
top = y;
startAngle = 180;
sweepAngle = 45;
}
}
Rect rect =
Rect.fromLTRB(left, top, left + pieceOfWidth, top + pieceOfHeight);
path.addOval(rect);
}
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
- 3、裁剪圆弧形
import 'package:flutter/material.dart';
/// WaveArcClipper
///
/// 圆弧效果的
class WaveArcClipper extends CustomClipper<Path> {
int _count;
bool _isReverse;
WaveArcClipper({
int waveCount,
bool isReverse = false,
}) {
_count = waveCount;
_isReverse = isReverse;
}
@override
Path getClip(Size size) {
var path = Path();
var _segment = _count * 2;
double pieceOfWidth = size.width / _segment;
double pieceOfHeight = size.height;
if (_isReverse) {
path.moveTo(0, 0);
} else {
path.moveTo(0, pieceOfHeight);
}
for (int i = 0; i < _segment; i++) {
double y = 0.0;
double left;
double top;
double right;
double bottom;
double startAngle;
double sweepAngle;
if (_isReverse) {
if (i % 2 == 1) {
y = 0;
left = pieceOfWidth * i;
top = y;
} else {
y = pieceOfHeight;
left = pieceOfWidth * i;
top = y;
}
} else {
if (i % 2 == 1) {
y = pieceOfHeight;
left = pieceOfWidth * i;
top = y;
startAngle = 180;
sweepAngle = -45;
} else {
y = 0;
left = pieceOfWidth * i;
top = y;
startAngle = 180;
sweepAngle = 45;
}
}
Rect rect =
Rect.fromLTRB(left, top, left + pieceOfWidth, top + pieceOfHeight);
path.arcTo(rect, startAngle, sweepAngle, false);
}
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
flutter开发者项目示例：
flutter_app_sample 帮助flutter开发者更快入门、精进，避免不必要的技术坑。
如果您觉得此项目对您有所帮助，也可以"star"一下，我们得到您的鼓励后会更有动力持续推出更多有益于您的技术示例
特征：
- 本项目是主打技术示例，所以涉及到的需求会比较少，涉及到的技术会比较多
- 本项目是为flutter开发者专门打造的“Api demo app”
- 本项目不仅包含flutter 各种widget组件，还包含开发包、插件，以及与各平台platforms交互、通信（Platform Channel）的技术示例。
- 移步查看更多特征......
网友评论