-
Flutter每周一组件
Flutter Inkwell
预览
使用场景
-
当需要给一个元素点击事件的时候，你可以用InkWell来包裹这个元素，它里面有常用交互事件和点击效果
组件参数说明
|
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 |
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 = <span style="color: #569cd6; line-height: 26px;">true</span>, //检测到的手势是否应该提供声音和/或触觉反馈，默认<span style="color: #569cd6; line-height: 26px;">true</span> bool excludeFromSemantics = <span style="color: #569cd6; line-height: 26px;">false</span>, //是否将此小部件引入的手势从语义树中排除。默认<span style="color: #569cd6; line-height: 26px;">false</span> FocusNode focusNode, bool canRequestFocus = <span style="color: #569cd6; line-height: 26px;">true</span>, ValueChanged<bool> onFocusChange, bool autofocus = <span style="color: #569cd6; line-height: 26px;">false</span>, }) |
案例代码
|
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 |
Widget build(BuildContext context) { <span style="color: #4ec9b0; line-height: 26px;">return</span> Scaffold( appBar: AppBar( title: Text(<span style="color: #d69d85; line-height: 26px;">'Flutter InkWell'</span>), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ InkWell( onTap: () { <span style="color: #4ec9b0; line-height: 26px;">print</span>(<span style="color: #d69d85; line-height: 26px;">'点击了'</span>); }, child: ListTile( title: Text(<span style="color: #d69d85; line-height: 26px;">'InkWell的子组件是ListTile'</span>), trailing: Icon(Icons.chevron_right), ), ), Divider(), InkWell( onTap: () { <span style="color: #4ec9b0; line-height: 26px;">print</span>(<span style="color: #d69d85; line-height: 26px;">'点击了'</span>); }, highlightColor: Colors.blue, autofocus: <span style="color: #569cd6; line-height: 26px;">true</span>, child: Text(<span style="color: #d69d85; line-height: 26px;">'InkWell的子组件是Text'</span>), ), Divider(), InkWell( onTap: () { <span style="color: #4ec9b0; line-height: 26px;">print</span>(<span style="color: #d69d85; line-height: 26px;">'必须要绑定事件，不然没效果'</span>); }, 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(<span style="color: #d69d85; line-height: 26px;">'InkWell的子组件是Container'</span>), ), ), ), ], )), ); } |
