关于flutter:Flutter-InkWell-Flutter每周一组件

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