Flutter Widget之InkWell

Widget:https://flutter.io/docs/development/ui/widgets
InkWell:https://docs.flutter.io/flutter/material/InkWell-class.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import 'package:flutter/material.dart';

class InkWellDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _InkWellDemoPagePageState();
}

class _InkWellDemoPagePageState extends State<InkWellDemoPage> {
@override
void initState() {
super.initState();
}

Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text('InkWell Demo'),
),
body:new Column(
children: <Widget>[
new Center(
child:new Material(
child: new InkWell(
onTap: () {
print('InkWell 1');
},
child: new Container( //不要在这里设置背景色, 否则会遮挡水波纹效果, 如果设置的话尽量设置Material下面的color来实现背景色
width: 300.0,
height: 100.0,
margin: EdgeInsets.all(0.0),
),
),
color: Colors.yellow,
),
),
new Center(
child: new Material(
child: new Ink( //INK可以实现装饰容器, 实现矩形, 设置背景色
color: Colors.teal,
child:new InkWell(
onTap: () {
print("InkWell 2");
},
child: new Container(
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child: new Ink( //用ink圆角矩形
//color: Colors.red,
decoration: new BoxDecoration(
/**
* assert(color == null || decoration == null,'Cannot provide both a color and a decoration'
* The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".')
* 在dart中使用assert 语句来中断正常的执行流程
* 不能同时使用Ink的变量color属性以及decoration属性, 两个只能存在一个
*/
color: Colors.purple,
borderRadius:new BorderRadius.all(new Radius.circular(20.0)),
),
child: new InkWell(
borderRadius:new BorderRadius.circular(20.0),//给水波纹也设置同样的圆角
onTap: () {
print('InkWell 3');
},
child: new Container(
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child:new Ink(
decoration: new BoxDecoration(
color: Colors.blueAccent,
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
),
child:new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
// highlightColor: Colors.yellowAccent, //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
highlightShape: BoxShape.rectangle, //点击或者toch控件高亮的shape形状
// InkResponse内部的radius这个需要注意的是, 我们需要半径大于控件的宽, 如果radius过小, 显示的水波纹就是一个很小的圆
radius: 300.0, //水波纹的半径
splashColor: Colors.blue, //水波纹的颜色
containedInkWell: true, //true表示要剪裁水波纹响应的界面, false不剪裁, 如果控件是圆角不剪裁的话水波纹是矩形
onTap: () {
print('InkWell 4');
},
child: new Container( //不能在InkResponse的child容器内部设置装饰器颜色, 否则会遮盖住水波纹颜色的, containedInkWell设置为false就能看到是否是遮盖了
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child:new Ink(
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
),
child:new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
highlightColor: Colors.orange, //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
highlightShape: BoxShape.rectangle, //点击或者toch控件高亮的shape形状
// InkResponse内部的radius这个需要注意的是, 我们需要半径大于控件的宽, 如果radius过小, 显示的水波纹就是一个很小的圆
radius: 0.0, //水波纹的半径
// splashColor: Colors.black, //水波纹的颜色
containedInkWell: true, //true表示要剪裁水波纹响应的界面, false不剪裁, 如果控件是圆角不剪裁的话水波纹是矩形
onTap: () {
print('InkWell 5');
},
child: new Container(//1.不能在InkResponse的child容器内部设置装饰器颜色,否则会遮盖住水波纹颜色的,containedInkWell设置为false就能看到是否是遮盖了。
width: 300.0,
height: 100.0,
),
),
),
),
),
],
),
);
}
}

Flutter Widget InkWell

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :