flutter widget组件之-----------绘制和视觉效果组件
flutter widget组件之-----------绘制和视觉效果组件
widget分为两类：widgets library中的标准widget和Material Components library中的专用widget;任何应用程序都可以使用widgets library中的widget，但只有Material应用程序可以使用Material Components库。其中Card，ListTitle就是Material Components库中的组件。
opacity
使其子widget透明的widget。
- 构造函数
Opacity({
Key key,
@required this.opacity,// 透明度
this.alwaysIncludeSemantics = false,//是否始终包含子widget的语义信息
Widget child,// 子组件
})
- 应用示例
import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
primaryColor: Colors.pink
),
home:MyStateFulWidget(),
);
}
}
class MyStateFulWidget extends StatefulWidget {
@override
_MyStateFulWidget createState() => new _MyStateFulWidget();
}
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Container(
child: Opacity(
opacity: 0.9,// 透明度
alwaysIncludeSemantics: true,
// 子组件
child: Column(
children: <Widget>[
RaisedButton(
onPressed: (){},
child: Text("点击"),
),
Text("文本text",style: TextStyle(color: Colors.lightGreen),)
],
)
),
)
);
}
}
transform
在绘制子widget之前应用转换的widget
- 构造函数
Transform({
Key key,
@required this.transform,//必须，一个4x4的矩阵。不难发现，其他平台的变换矩阵也都是四阶的。一些复合操作，仅靠三维是不够的，必须采用额外的一维来补充，感兴趣的同学可以自行搜索了解
this.origin,//旋转参考点，默认旋转点事左上角顶点
this.alignment,//对齐方式
this.transformHitTests = true,// 点击区域是否要做响应的改变
Widget child,// 子组件
})
Transform.rotate({
Key key,
@required double angle,// 弧度
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
Widget child,
})
Transform.translate({
Key key,
@required Offset offset,//偏移量
this.transformHitTests = true,
Widget child,
})
Transform.scale({
Key key,
@required double scale,//缩放级别
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
Widget child,
})
- 应用示例
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.black,
child: Transform(
alignment: Alignment.topRight,// 对齐方式
origin:Offset(0,5) ,//旋转参考点
transform: Matrix4.skewY(0.3)..rotateZ(30),//转换矩阵
//要转换的组件
child: Container(
padding: const EdgeInsets.all(8.0),
color: const Color(0xFFE8581C),
child: const Text('Apartment for rent!'),
),
),
),
],
),
)
);
}
}
fractionalTranslation
绘制盒子之前给其添加一个偏移转换
- 构造函数
FractionalTranslation({
Key key,
@required this.translation,//应用于子对象的转换， Offset对象
this.transformHitTests = true,// 点击区域是否要做响应的改变
Widget child, // 子组件
})
- 应用示例
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Center(
child: Column(
children: <Widget>[
Container(
// width: 100,
// height: 100,
// color: Colors.black,
child: FractionalTranslation(
// 子对象
child: RaisedButton(onPressed: (){},child: Text("data"),),
//将子对象，向右移动组件宽度的1倍，向下移动组件高度的1倍
translation: Offset(1, 1),
transformHitTests: true,
),
)
],
),
)
);
}
}
DecoratedBox
在孩子绘制之前或之后绘制装饰的widget
- 构造函数
DecoratedBox({
Key key,
@required this.decoration,// 装饰器，通常用boxdecoration
this.position = DecorationPosition.background,//在子组件的前面还是后面绘制此装饰
Widget child// 子组件
})
- 应用示例
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Center(
child: Column(
children: <Widget>[
//装饰容器DecoratedBox
DecoratedBox(
// 装饰器，通常用boxdecoration
decoration: BoxDecoration(
//线性背景颜色
gradient: LinearGradient(colors: [Colors.blue,Colors.yellow]),
//边框角度
borderRadius: BorderRadius.circular(30.0),
//阴影
boxShadow:[
BoxShadow(
//颜色
color: Colors.black,
//偏移量
offset: Offset(4.0, 4.0),
//模糊半径
blurRadius: 10.0
)
]
),
//在子组件的前面还是后面绘制此装饰
position: DecorationPosition.background,// 设置到后面
// 子组件
child: Padding(
padding: EdgeInsets.all(20.0),
child: Text("DecoratedBox",style: TextStyle(color: Colors.white),),
),
),
],
),
)
);
}
}
RotatedBox
可以延顺时针以90度的倍数旋转其子widget
- 构造函数
RotatedBox({
Key key,
@required this.quarterTurns,//子组件应该顺时针旋转的的次数，每次1/4圈
Widget child,// 子组件
})
- 应用示例
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Center(
child: Column(
children: <Widget>[
RotatedBox(
// 子组件
child: RaisedButton(onPressed: (){},child: Text("旋转"),),
//旋转1/4圈的次数
quarterTurns: 3,
)
],
),
)
);
}
}
ClipOval ClipPath ClipRect ClipRRect
ClipOval: 圆形裁剪，用椭圆剪辑其孩子的widget
ClipPath: 路径裁剪，用path剪辑其孩子的widget
ClipRect：矩形裁剪，用矩形剪辑其孩子的widget
ClipRRect:圆角矩形裁剪
- 构造函数
ClipOval({
Key key,
this.clipper,// 裁剪路径
this.clipBehavior = Clip.antiAlias, //裁剪行为
Widget child // 子组件
})
ClipPath({
Key key,
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child
})
ClipRect({
Key key,
this.clipper,
this.clipBehavior = Clip.hardEdge,
Widget child
})
const ClipRRect({
Key key,
this.borderRadius,
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child,
})
- 应用示例
class _MyStateFulWidget extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("mediaquery")),
body: Center(
child: Column(
children: <Widget>[
//圆形裁剪
ClipOval(
// clipper: ,
child:new SizedBox(
width: 100.0,
height:100.0,
child: new Image.asset("assets/images/3.jpg",fit: BoxFit.fill,),
),
),
Divider(color: Colors.red,height: 2,),
// 按路径裁剪，自定义了裁剪路径
ClipPath(
child:new SizedBox(
width: 100.0,
height:100.0,
child: new Image.asset("assets/images/4.jpg",fit: BoxFit.fill,),
),
// 自定义五角星裁剪路径
clipper:new _StarCliper(radius: 50.0) ,
),
Divider(color: Colors.red,height: 2,),
// 圆角矩形裁剪
ClipRRect(
borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
child:new SizedBox(
width: 100.0,
height:100.0,
child: new Image.asset("assets/images/3.jpg",fit: BoxFit.fill,),
),
),
Divider(color: Colors.red,height: 2,),
//方角矩形裁剪 ，自定义了裁剪路径
ClipRect(
child:new SizedBox(
width: 100.0,
height:100.0,
child: new Image.asset("assets/images/4.jpg",fit: BoxFit.fill,),
),
clipper: new _MyClipper(),
)
],
),
)
);
}
}
// 自定义裁剪器
class _MyClipper extends CustomClipper<Rect>{
@override
Rect getClip(Size size) {
return new Rect.fromLTRB(10.0, 10.0, size.width - 10.0, size.height- 10.0);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return true;
}
}
// 五角星路径
class _StarCliper extends CustomClipper<Path>{
final double radius;
_StarCliper({this.radius});
/// 角度转弧度公式
double degree2Radian(int degree) {
return (Math.pi * degree / 180);
}
@override
Path getClip(Size size) {
double radius = this.radius;
Path path = new Path();
double radian = degree2Radian(36);// 36为五角星的角度
double radius_in = (radius * Math.sin(radian / 2) / Math
.cos(radian)); // 中间五边形的半径
path.moveTo((radius * Math.cos(radian / 2)), 0.0);// 此点为多边形的起点
path.lineTo((radius * Math.cos(radian / 2) + radius_in
* Math.sin(radian)),
(radius - radius * Math.sin(radian / 2)));
path.lineTo((radius * Math.cos(radian / 2) * 2),
(radius - radius * Math.sin(radian / 2)));
path.lineTo((radius * Math.cos(radian / 2) + radius_in
* Math.cos(radian / 2)),
(radius + radius_in * Math.sin(radian / 2)));
path.lineTo(
(radius * Math.cos(radian / 2) + radius
* Math.sin(radian)), (radius + radius
* Math.cos(radian)));
path.lineTo((radius * Math.cos(radian / 2)),
(radius + radius_in));
path.lineTo(
(radius * Math.cos(radian / 2) - radius
* Math.sin(radian)), (radius + radius
* Math.cos(radian)));
path.lineTo((radius * Math.cos(radian / 2) - radius_in
* Math.cos(radian / 2)),
(radius + radius_in * Math.sin(radian / 2)));
path.lineTo(0.0, (radius - radius * Math.sin(radian / 2)));
path.lineTo((radius * Math.cos(radian / 2) - radius_in
* Math.sin(radian)),
(radius - radius * Math.sin(radian / 2)));
path.close();// 使这些点构成封闭的多边形
return path;
}
@override
bool shouldReclip(_StarCliper oldClipper) {
return this.radius != oldClipper.radius;
}
}
customPaint
提供一个画布的widget，在绘制阶段可以在画布上绘制自定义图形
- 构造函数
CustomPaint({
Key key,
this.painter,// 绘制主体的绘制工具
this.foregroundPainter,// 绘制前景的绘制工具
this.size = Size.zero,// 画布大小
this.isComplex = false,// 是否要用到缓冲
this.willChange = false,// 是否应告知光栅缓存此绘制可能在下一帧中更改。
Widget child,// 子组件，通常不用，一般都得不到想要的子组件
})
- 应用示例
mport 'package:flutter/material.dart';
import 'dart:ui';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
primaryColor: Colors.pink
),
home:ClockPage(),
);
}
}
class ClockPage extends StatefulWidget {
final double radius;
final Color hourHandColor;
final Color minuteHandColor;
final Color secondHandColor;
final Color numberColor;
final Color borderColor;
const ClockPage(
{Key key,
this.hourHandColor,
this.minuteHandColor,
this.secondHandColor,
this.numberColor,
this.borderColor,
this.radius = 150.0})
: super(key: key);
@override
State<StatefulWidget> createState() {
return ClockPageState();
}
}
class ClockPageState extends State<ClockPage> {
DateTime datetime;
Timer timer;
@override
void initState() {
super.initState();
datetime = DateTime.now();
timer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
datetime = DateTime.now();
});
});
}
@override
void dispose() {
super.dispose();
timer.cancel();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("customPainter"),),
body: CustomPaint(
// 绘制主体的绘制工具
painter: ClockPainter(
datetime,
numberColor: Colors.black,
handColor: Colors.black,
borderColor: Colors.black,
radius: widget.radius
),
//画布大小
size: Size(widget.radius * 2, widget.radius * 2),
),
);
}
}
class ClockPainter extends CustomPainter {
final Color handColor;
final Color numberColor;
final Color borderColor;
final double radius;
List<Offset> secondsOffset = [];
final DateTime datetime;
TextPainter textPainter;
double angle;
double borderWidth;
ClockPainter(this.datetime,
{this.radius = 150.0,
this.handColor = Colors.black,
this.numberColor = Colors.black,
this.borderColor = Colors.black}) {
borderWidth = radius / 14;
final secondDistance = radius - borderWidth * 2;
//init seconds offset
for (var i = 0; i < 60; i++) {
Offset offset = Offset(
cos(degToRad(6 * i - 90)) * secondDistance + radius,
sin(degToRad(6 * i - 90)) * secondDistance + radius);
secondsOffset.add(offset);
}
textPainter = new TextPainter(
textAlign: TextAlign.center,
textDirection: TextDirection.rtl,
);
angle = degToRad(360 / 60);
}
@override
void paint(Canvas canvas, Size size) {
final scale = radius / 150;
//draw border
final borderPaint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
canvas.drawCircle(
Offset(radius, radius), radius - borderWidth / 2, borderPaint);
//draw second point
final secondPPaint = Paint()
..strokeWidth = 2 * scale
..color = numberColor;
if (secondsOffset.length > 0) {
canvas.drawPoints(PointMode.points, secondsOffset, secondPPaint);
canvas.save();
canvas.translate(radius, radius);
List<Offset> bigger = [];
for (var i = 0; i < secondsOffset.length; i++) {
if (i % 5 == 0) {
bigger.add(secondsOffset[i]);
//draw number
canvas.save();
canvas.translate(0.0, -radius + borderWidth * 4);
textPainter.text = new TextSpan(
text: "${(i ~/ 5) == 0 ? "12" : (i ~/ 5)}",
style: TextStyle(
color: numberColor,
fontFamily: 'Times New Roman',
fontSize: 28.0 * scale,
),
);
//helps make the text painted vertically
canvas.rotate(-angle * i);
textPainter.layout();
textPainter.paint(canvas,
new Offset(-(textPainter.width / 2), -(textPainter.height / 2)));
canvas.restore();
}
canvas.rotate(angle);
}
canvas.restore();
final biggerPaint = Paint()
..strokeWidth = 5 * scale
..color = numberColor;
canvas.drawPoints(PointMode.points, bigger, biggerPaint);
}
final hour = datetime.hour;
final minute = datetime.minute;
final second = datetime.second;
// draw hour hand
Offset hourHand1 = Offset(
radius - cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.2),
radius - sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.2));
Offset hourHand2 = Offset(
radius + cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.5),
radius + sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.5));
final hourPaint = Paint()
..color = handColor
..strokeWidth = 8 * scale;
canvas.drawLine(hourHand1, hourHand2, hourPaint);
// draw minute hand
Offset minuteHand1 = Offset(
radius - cos(degToRad(360 / 60 * minute - 90)) * (radius * 0.3),
radius - sin(degToRad(360 / 60 * minute - 90)) * (radius * 0.3));
Offset minuteHand2 = Offset(
radius +
cos(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3),
radius +
sin(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3));
final minutePaint = Paint()
..color = handColor
..strokeWidth = 3 * scale;
canvas.drawLine(minuteHand1, minuteHand2, minutePaint);
// draw second hand
Offset secondHand1 = Offset(
radius - cos(degToRad(360 / 60 * second - 90)) * (radius * 0.3),
radius - sin(degToRad(360 / 60 * second - 90)) * (radius * 0.3));
Offset secondHand2 = Offset(
radius +
cos(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3),
radius +
sin(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3));
final secondPaint = Paint()
..color = handColor
..strokeWidth = 1 * scale;
canvas.drawLine(secondHand1, secondHand2, secondPaint);
final centerPaint = Paint()
..strokeWidth = 2 * scale
..style = PaintingStyle.stroke
..color = Colors.yellow;
canvas.drawCircle(Offset(radius, radius), 4 * scale, centerPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
num degToRad(num deg) => deg * (pi / 180.0);
num radToDeg(num rad) => rad * (180.0 / pi);
backDropFilter
一个widget，它将过滤器应用到现有的绘图内容，然后绘制孩子。这种效果是比较昂贵的，尤其是如果过滤器是non-local，如blur.
BackdropFilter不是变换背景来实现高斯模糊的效果，而是通过在背景上面盖上一个模糊层从而达到高斯模糊的效果，因此要做模糊的组件必须要在BackdropFilter底下，通常用Stack来控制布局的层次摆放
- 构造函数
BackdropFilter({
Key key,
@required this.filter,// 过滤器，构建模糊效果
Widget child
})
- 应用示例
class MyStatePageState extends State<MyStatePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("customPainter"),),
body: Center(
child: Stack(
// 作为模糊背景的组件放在前面
children: <Widget>[
// Container(
// alignment: Alignment.center,
// child: Image.asset("assets/images/4.jpg",width: 300, height: 300,),
// ),
// // 作为模糊背景的组件
RaisedButton(onPressed: (){},child: Text("data"),),
// 定义模糊效果
BackdropFilter(
// 过滤器，构建模糊效果
filter: ui.ImageFilter.blur(sigmaX:1, sigmaY: 1),
child: Container(
color: Colors.white.withAlpha(0),
),
),
],
),
),
);
}
}