Flutter Inkwell应用详解

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

应用场景

当须要给一个元素点击事件的时候，你能够用InkWell来包裹这个元素，它外面有罕用交互事件和点击成果，能够简略实现想要的成果

预览

组件参数阐明

const InkWell({    Key key,    Widget child, //子组件    GestureTapCallback onTap, //单击事件    GestureTapCallback onDoubleTap, //双击事件    GestureLongPressCallback onLongPress, //长按事件    GestureTapDownCallback onTapDown, //手指按下    GestureTapCancelCallback onTapCancel, //勾销点击事件    ValueChanged<bool> onHighlightChanged, //突出显示或进行突出显示时调用    ValueChanged<bool> onHover, //当指针进入或退出墨水响应区域时调用    MouseCursor mouseCursor,    Color focusColor, //获取焦点色彩    Color hoverColor, //指针悬停时色彩    Color highlightColor, //按住不放时的色彩    MaterialStateProperty<Color> overlayColor,    Color splashColor, //溅墨色彩    InteractiveInkFeatureFactory splashFactory, //自定义溅墨成果    double radius, //溅墨半径    BorderRadius borderRadius, //溅墨元素边框圆角半径    ShapeBorder customBorder, //笼罩borderRadius的自定义剪辑边框    bool enableFeedback = true, //检测到的手势是否应该提供声音和/或触觉反馈，默认true    bool excludeFromSemantics = false, //是否将此小部件引入的手势从语义树中排除。默认false    FocusNode focusNode,    bool canRequestFocus = true,    ValueChanged<bool> onFocusChange,    bool autofocus = false,   })

案例代码

Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Flutter InkWell'),      ),      body: Center(          child: Column(        mainAxisAlignment: MainAxisAlignment.center,        children: [          InkWell(            onTap: () {              print('点击了');            },            child: ListTile(              title: Text('InkWell的子组件是ListTile'),              trailing: Icon(Icons.chevron_right),            ),          ),          Divider(),          InkWell(            onTap: () {              print('点击了');            },            highlightColor: Colors.blue,            autofocus: true,            child: Text('InkWell的子组件是Text'),          ),          Divider(),          InkWell(            onTap: () {              print('必须要绑定事件，不然没成果');            },            borderRadius: BorderRadius.all(Radius.circular(50.0)),            splashColor: Colors.red,            child: Container(              padding: EdgeInsets.all(10.0),              child: Container(                width: 200.0,                height: 200.0,                decoration: BoxDecoration(                    borderRadius: BorderRadius.all(Radius.circular(300.0))),                padding: EdgeInsets.all(10.0),                child: Text('InkWell的子组件是Container'),              ),            ),          ),        ],      )),    );  }
感觉有用 ？喜爱就珍藏，顺便点个赞吧，你的反对是我最大的激励！微信搜 [DX前端框架知识库]，发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端常识和实战.
DX前端，分享前端框架知识库，文章详见：dxong.com