Flutter 侧滑栏及城市选择UI的实现

Flutter 侧滑栏UI及城市选择UI的实现

前言

  目前移动市场上很多业务都需要开发Android/IOS两个端，开发成本比较高. Flutter 在跨端上凭借着性能优势关注量，使用度也持续上升.今天给大家分享在去年就写的一个Flutter版本的侧滑栏.

实现

先上一张实现效果图

SliderBar 实现

  侧边是一个支持手势滑动的SliderBar,一个自定义的StatefulWidget.可以观察到，当手势在侧边滑动时，中央显示选中的标签.

布局

  一个横向布局，里面放了一个元素。左边标签的容器尽量占满整个屏幕,右边固定宽度的一个列表（里面放需要展示的Label),代码如下:

new Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Expanded(
            child: new Center(
                child: new Text(selectLabel,
                    style:
                        new TextStyle(color: Colors.orange, fontSize: 40.0)))),
        slide
      ],
    );

手势数据处理

   Flutter 提供 手势处理类 GestureDetector,当手势开始滑动是更新中央Label显示，停止或者取消时，取消Label显示并把对应的数据填充到Label上.

new GestureDetector(
      behavior: HitTestBehavior.translucent,
      child: slideWidget,
      onPanStart: (event) {
        updateLabel(context, event.globalPosition);
      },
      onPanDown: (event) {
        updateLabel(context, event.globalPosition);
      },
      onVerticalDragUpdate: (event) {
        updateLabel(context, event.globalPosition);
      },
      onPanCancel: () {
        setState(() {
          selectLabel = '';
        });
      },
      onVerticalDragEnd: (event) {
        setState(() {
          selectLabel = '';
        });
      },
    );

遇到的问题以及解决方法：

• GestureDetector 监听