Flutter | 超簡單仿微信QQ側滑選單元件

Flutter筆記發表於2019-09-18

Flutter元件

相信大家對於這種需求肯定不陌生：

側滑出選單，在Flutter 當中，這種需求怎麼實現？

看一下實現的效果：

需求分析

老套路，先分析一下需求：

首先可以滑出選單
選單滑動到一定距離完全滑出，未達到距離回滾
選單數量、樣式隨意定製
選單點選回撥
選單展開時，點選 item 收回選單（見QQ）

程式碼實現

需求明瞭以後就可以寫程式碼了。

1. 首先可以滑出選單

最基本的，選單要能滑的出來，我們思考一下，如何能在螢幕外面放置 Widget，並且還能滑動？

基本上不到一分鐘，相信大家都能想出來答案：ScrollView，沒錯，也就只有 ScrollView 滿足我們的需求。

說幹就幹：

SingleChildScrollView(
  physics: ClampingScrollPhysics(),
  scrollDirection: Axis.horizontal,
  controller: _controller,
  child: Row(children: children),
)

---------------
// 第一個 Widget，寬度為螢幕的寬度
SizedBox(
  width: screenWidth,
  child: child,
),
複製程式碼

首先把 ScrollView 滑動的位置改為橫向
把滑動的效果改為 ClampingScrollPhysics，否則 iOS 會有回彈的效果
設定一個 controller，用於監聽滑動距離
設定child 為Row，並且第一個 Widget 充滿橫向螢幕，這樣後續的選單就在螢幕外了

2. 選單滑動到一定距離完全滑出，未達到距離回滾

這個效果就需要監聽滑動距離和手勢了。

如果滑動距離大於所有 menu 寬度的 1/4，那就全都滑出來，如果不到的話，就回滾回去。

那就要判斷一下手是否已經離開螢幕，在這個時候判斷距離。

本來想著套一個 Gesture，但是發現不行，問了一下大佬們，用了 Listener。

程式碼如下：

Listener(
  onPointerUp: (d) {
    if (_controller.offset < (screenWidth / 5) * menu.length / 4) {
      _controller.animateTo(0, duration: Duration(milliseconds: 100), curve: Curves.linear);
    } else {
      _controller.animateTo(menu.length * (screenWidth / 5), duration: Duration(milliseconds: 100), curve: Curves.linear);
    }
  },
  child: SingleChildScrollView(
    physics: ClampingScrollPhysics(),
    scrollDirection: Axis.horizontal,
    controller: _controller,
    child: Row(children: children),
  ),
)
複製程式碼

很簡單，就是在 手抬起 的時候判斷了一下距離，然後呼叫了 animteTo 方法。

3. 選單數量、樣式隨意定製

這個其實很簡單，讓「使用者」來傳入就好了，

我只需要控制 menu 的寬度。

於是我把 Container 的引數都扒了下來，封裝成了一個元件 SlideMenuItem：

class SlideMenuItem extends StatelessWidget {
  SlideMenuItem({
    Key key,
    @required this.child,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    this.height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    @required this.onTap,
  })  : assert(child != null),
        assert(margin == null || margin.isNonNegative),
        assert(padding == null || padding.isNonNegative),
        assert(decoration == null || decoration.debugAssertIsValid()),
        assert(constraints == null || constraints.debugAssertIsValid()),
        assert(
            color == null || decoration == null,
            'Cannot provide both a color and a decoration\n'
            'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'),
        decoration =
            decoration ?? (color != null ? BoxDecoration(color: color) : null),
        constraints = (height != null)
            ? constraints?.tighten(height: height) ??
                BoxConstraints.tightFor(height: height)
            : constraints,
        super(key: key);

  final BoxConstraints constraints;
  final Decoration decoration;
  final AlignmentGeometry alignment;
  final EdgeInsets padding;
  final Decoration foregroundDecoration;
  final EdgeInsets margin;
  final Matrix4 transform;
  final Widget child;
  final double height;
  final GestureTapCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
      alignment: alignment,
      constraints: constraints,
      decoration: decoration,
      padding: padding,
      width: screenWidth / 5,
      height: height,
      foregroundDecoration: foregroundDecoration,
      margin: margin,
      transform: transform,
    );
  }
}
複製程式碼

這麼長的程式碼，其實就「width」和「onTap」是自己寫的。

4. 選單點選回撥

這裡有個小問題：把 Menu 單獨封裝成了一個元件，那如何在點選 menu 的時候把 menu 收回去？

基於這個問題，在建立整個 SlideItem 的時候，通過建構函式把每一個 menu 都新增上了 GestureDetector，然後在 onTap() 回撥中呼叫 menu 的 onTap() 方法，再呼叫 dismiss() 方法來收回 menu。

程式碼如下：

addAll(menu
       .map((w) => GestureDetector(
         child: w,
         onTap: (){
           w.onTap();
           dismiss();
         },
       ))
       .toList());
複製程式碼

5. 選單展開時，點選 item 收回選單

也就是選單展開時，點選了 item 的話，要先收回選單。QQ 就是如此。

這裡有一個知識點，我們設定的點選事件預設是不會命中透明元件的，所以要給第一個預設佔滿螢幕寬度的 Widget 加上一個屬性：behavior: HitTestBehavior.opaque。

完整的程式碼如下：

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: (){
    if(_controller.offset != 0){
      dismiss();
    }else{
      onTap();
    }
  },
  child: SizedBox(
    width: screenWidth,
    child: child,
  ),
)
複製程式碼

其中 behavior 有三個值：

deferToChild：子元件會一個接一個的進行命中測試，如果子元件中有測試通過的，則當前元件通過，這就意味著，如果指標事件作用於子元件上時，其父級元件也肯定可以收到該事件。
opaque：在命中測試時，將當前元件當成不透明處理(即使本身是透明的)，最終的效果相當於當前Widget的整個區域都是點選區域。
translucent：當點選元件透明區域時，可以對自身邊界內及底部可視區域都進行命中測試，這意味著點選頂部元件透明區域時，頂部元件和底部元件都可以接收到事件。