Flutter Inkwell使用详解

该文章属于【Flutter每周一组件】系列，其它组件可以查看该系列下的文章，该系列会不间断更新；所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo 欢迎Star

使用场景

当需要给一个元素点击事件的时候，你可以用InkWell来包裹这个元素，它里面有常用交互事件和点击效果，可以简单实现想要的效果

预览

组件参数说明

1const InkWell({
2    Key key,
3    Widget child, //子组件
4    GestureTapCallback onTap, //单击事件
5    GestureTapCallback onDoubleTap, //双击事件
6    GestureLongPressCallback onLongPress, //长按事件
7    GestureTapDownCallback onTapDown, //手指按下
8    GestureTapCancelCallback onTapCancel, //取消点击事件
9    ValueChanged<bool> onHighlightChanged, //突出显示或停止突出显示时调用
10    ValueChanged<bool> onHover, //当指针进入或退出墨水响应区域时调用
11    MouseCursor mouseCursor,
12    Color focusColor, //获取焦点颜色
13    Color hoverColor, //指针悬停时颜色
14    Color highlightColor, //按住不放时的颜色
15    MaterialStateProperty<Color> overlayColor,
16    Color splashColor, //溅墨颜色
17    InteractiveInkFeatureFactory splashFactory, //自定义溅墨效果
18    double radius, //溅墨半径
19    BorderRadius borderRadius, //溅墨元素边框圆角半径
20    ShapeBorder customBorder, //覆盖borderRadius的自定义剪辑边框
21    bool enableFeedback = true, //检测到的手势是否应该提供声音和/或触觉反馈，默认true
22    bool excludeFromSemantics = false, //是否将此小部件引入的手势从语义树中排除。默认false
23    FocusNode focusNode,
24    bool canRequestFocus = true,
25    ValueChanged<bool> onFocusChange,
26    bool autofocus = false, 
27  })

案例代码

1Widget build(BuildContext context) {
2    return Scaffold(
3      appBar: AppBar(
4        title: Text('Flutter InkWell'),
5      ),
6      body: Center(
7          child: Column(
8        mainAxisAlignment: MainAxisAlignment.center,
9        children: [
10          InkWell(
11            onTap: () {
12              print('点击了');
13            },
14            child: ListTile(
15              title: Text('InkWell的子组件是ListTile'),
16              trailing: Icon(Icons.chevron_right),
17            ),
18          ),
19          Divider(),
20          InkWell(
21            onTap: () {
22              print('点击了');
23            },
24            highlightColor: Colors.blue,
25            autofocus: true,
26            child: Text('InkWell的子组件是Text'),
27          ),
28          Divider(),
29          InkWell(
30            onTap: () {
31              print('必须要绑定事件，不然没效果');
32            },
33            borderRadius: BorderRadius.all(Radius.circular(50.0)),
34            splashColor: Colors.red,
35            child: Container(
36              padding: EdgeInsets.all(10.0),
37              child: Container(
38                width: 200.0,
39                height: 200.0,
40                decoration: BoxDecoration(
41                    borderRadius: BorderRadius.all(Radius.circular(300.0))),
42                padding: EdgeInsets.all(10.0),
43                child: Text('InkWell的子组件是Container'),
44              ),
45            ),
46          ),
47        ],
48      )),
49    );
50  }

觉得有用 ？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！微信搜公众号 [DX前端框架知识库]，发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端知识和实战.

DX前端，分享前端框架知识库，文章详见：DX前端