Flutter InkWell – Flutter每周一組件

• 2020 年 12 月 19 日
• 筆記

Flutter Inkwell使用詳解

該文章屬於【Flutter每周一組件】系列，其它組件可以查看該系列下的文章，該系列會不間斷更新；所有組件的demo已經上傳值Github: //github.com/xj124456/flutter_widget_demo, 歡迎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