文章

09.Flutter其他的组件

发表于 更新于
作者 Hacket Zeng
8 分钟阅读
09.Flutter其他的组件

InkWell

Flutter 中的水波纹组件——InkWell，可以作用在 Container、Image 等各种组件，不仅仅是按钮。
用 InkWell 或者 GestureDetector 将某个组件包起来，可添加点击事件。

InkWel 有背景时点击无水波纹

  • 有水波纹
1
2
3
4
5
6
7
8
9
10
11

InkWell(
  //单击事件响应
  onTap: () {},
  child: Container(
    alignment: const Alignment(0, 0),
    // color: Colors.blue,
    height: 58,
    width: 120,
    child: const Text("InkWell click event"),
  ),
)

加上 Colors.blue 后点击就没有水波纹了；如果把上面蓝色的 Container 的 color 修改为 Colors.blue.withAlpha(100) ，可以看到此时水波纹效果；
一开始水波纹效果之所以会看不到，直接原因其实是因为被 InkWell 的 child 的蓝色给覆盖。

InkWell 的水波纹和点击效果，其实是在底部产生；InkWell 的点击效果不是通过自身产生的，而是默认通过所在的 Scaffold 内的 Material 来完成点击动画

Ink 的作用就是为了方便使用 InkWell 的点击效果而存在， 你可以把 Container 上的 color 、decoration 等配置挪到 Ink 上从而解决 Material 的点击效果被遮挡的问题。

widget 设置水波纹点击效果 并设置 widget 背景

InkWell 的点击效果是通过 Material 实现，前面点击的水波纹和高亮效果其实是被 Container 的背景色遮挡，这时候我们可以添加多一个 Material ，然后将背景色挪到 Material 上，此时可以看到点击效果恢复正常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

new Center(
   child: new Material(
     // 设置背景颜色 默认矩形
     color: Colors.purple,
     child: new InkWell(
       //点击事件回调
       onTap: () {},
       //不要在这里设置背景色，for则会遮挡水波纹效果,如果设置的话尽量设置Material下面的color来实现背景色
       child: new Container(
         width: 300.0,
         height: 50.0,
         //设置child 居中
         alignment: Alignment(0, 0),
         child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
       ),
     ),
   ),
),

6696458eaaa79452c9a170e13daafb70.gif

或者 可以使用 Ink 来设置，与 Material 设置 color 的区别是，Ink 可设置背景的形状样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

new Center(
 child: new Material(
   // INK可以实现装饰容器，实现矩形  设置背景色
   child: new Ink(
     // 设置背景  默认矩形
     color: Colors.purple,
     child: new InkWell(
       // 点击事件回调
       onTap: () {},
       child: new Container(
         width: 300.0,
         height: 50.0,
         // 设置child 居中
         alignment: Alignment(0, 0),
         child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
       ),
     ),
   ),
 ),
)

圆角 widget 设置水波纹点击效果

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

new Center(
  child: new Material(
    // INK可以实现装饰容器
    child: new Ink(
      //用ink圆角矩形
    	// color: Colors.red,
      decoration: new BoxDecoration(
       //不能同时”使用Ink的变量color属性以及decoration属性，两个只能存在一个
        color: Colors.purple,
        //设置圆角
        borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
      ),
      child: new InkWell(
        //圆角设置,给水波纹也设置同样的圆角
        //如果这里不设置就会出现矩形的水波纹效果
        borderRadius: new BorderRadius.circular(25.0), 
        //设置点击事件回调
        onTap: () {

        },
        child: new Container(
          width: 300.0,
          height: 50.0,
          //设置child 居中
          alignment: Alignment(0, 0),
          child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
        ),
      ),
    ),
  ),
),

3f6e4ef893f2f72570f59ab71712e077.gif


如果 InkWell 与 Ink 不同时设置相同的圆角，例如 lnkWell 设置的圆角为 20，而 Ink 没有设置,就会出现矩形的水波纹点击效果

8dbc95c6e8876143125de9eb1fea8733.gif

圆角 widget 设置自定义水波纹颜色点击效果

InkResponse 组件也可实现 InkWell 组件相同的功能，因为 InkWell 继承于 InkResponse，相比之下，InkResponse 可以选择控制水波纹以及高亮底色的形状和剪裁效果

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

new Center(
  child: new Material(
    child: new Ink(
      //设置背景
      decoration: new BoxDecoration(
        color: Colors.purple,
        borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
      ),
      child: new InkResponse(
        borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
        //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
        //highlightColor: Colors.yellowAccent,
        //点击或者toch控件高亮的shape形状
        highlightShape: BoxShape.rectangle,
        //.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，
        //水波纹的半径
        radius: 300.0,
        //水波纹的颜色
        splashColor: Colors.black,
        //true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形
        containedInkWell: true,
        //点击事件
        onTap: () {
          print("click");
        },
        child: new Container(
          //不能在InkResponse的child容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。
          width: 300.0,
          height: 50.0,
          //设置child 居中
          alignment: Alignment(0, 0),
          child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
        ),

      ),
    ),
  ),
),

b613ae6dd7271f23f778d94243a1c85d.gif

圆角 widget 设置高亮颜色点击效果

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

new Center(
  child: new Material(
    child: new Ink(
      //设置背景
      decoration: new BoxDecoration(
        color: Colors.purple,
        borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
      ),
      child: new InkResponse(
        borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
        //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
        highlightColor: Colors.purple[800],
        //点击或者toch控件高亮的shape形状
        highlightShape: BoxShape.rectangle,
        //.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，
        //水波纹的半径
        radius: 0.0,
        //水波纹的颜色 设置了highlightColor属性后 splashColor将不起效果
        splashColor: Colors.red,
        //true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形
        containedInkWell: true,

        onTap: () {
          print(
              'click');
        },
        child: new Container(
          //不能在InkResponse的child容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。
          width: 300.0,
          height: 50.0,
          //设置child 居中
          alignment: Alignment(0, 0),
          child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
        ),
      ),
    ),
  ),
),

7d52b763ecf9420723701a9114c8bd09.gif

跨平台, Flutter
Flutter
本文由作者按照 CC BY 4.0 进行授权