Flutter InkWell - Flutter每週一組件

時間 2021-01-02

標籤前端 git github 前端框架微信 app 框架 ide 指針欄目 Git 简体版

原文原文鏈接

Flutter Inkwell使用詳解

該文章屬於【Flutter每週一組件】系列，其它組件能夠查看該系列下的文章，該系列會不間斷更新；全部組件的demo已經上傳值Github: https://github.com/xj124456/flutter_widget_demo, 歡迎Star前端

使用場景

當須要給一個元素點擊事件的時候，你能夠用InkWell來包裹這個元素，它裏面有經常使用交互事件和點擊效果，能夠簡單實現想要的效果git

預覽

組件參數說明

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'),
              ),
            ),
          ),
        ],
      )),
    );
  }