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

傷城~ 2021-11-14 00:14 382阅读 0赞

转载自[北斗星\_And][And]大神的博客，未经原博主同意，禁止转载

## 前言 ##

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

## 实现 ##

先上一张实现效果图

![20190719111203351.gif][]

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 监听的手势很多，当注册 onVerticalDragUpdate 后，onPanUpdate 不在回调，解决方法：将onPanUpdate逻辑全部移入onVerticalDragUpdate，  
onPanUp 未监听到手势抬起，解决方法：换用onPanCancel，onVerticalDragEnd方法监听  
updateLabel，获取具体选中Label的index 公式为 index = dy / widgetHeight \* labelList.length,其中dy 为 以控件起始点y的位置偏移量,widgetHeight为高度,  
labelList.length为Label的长度，刷新数据逻辑如下：

void updateLabel(BuildContext context, Offset globalPosition) {
        var object = globalKey?.currentContext?.findRenderObject();
        var translation = object?.getTransformTo(null)?.getTranslation();
    
        int index = ((globalPosition.dy - translation.y - topMargin) /
                (globalKey.currentContext.size.height - topMargin) *
                widget.showList.length)
            .toInt();
        if (index < widget.showList.length && index >= 0) {
          setState(() {
            selectLabel = widget.showList[index];
            if (widget.onChangeSelect != null) {
              widget.onChangeSelect(selectLabel);
            }
          });
        }
      }

其中,获取控件距离屏幕的距离方法为：

var object = globalKey?.currentContext?.findRenderObject();
      var translation = object?.getTransformTo(null)?.getTranslation();

### 城市选择主界面实现 ###

主布局

采用了Flutter 的Stack布局(非常类似Android FrameLayout),下层是城市选择页面数据，上层盖了一层SliderBar

new Scaffold(
            appBar: getAppBar(),
            body: new Stack(children: <Widget>[
              getShowContentView(),
              new SlideBar(
                  cityListUtils.labelList, onChangeSelect)
            ]));

UI的下层 使用 ListView.builder 根据item类型返回不同类型的Widget

Widget rightCity = new Container(
           color: AppColor.white,
           padding: EdgeInsets.only(right: 20.0),
           child: new ListView.builder(
               controller: scrollController,
               itemCount: cityListUtils.cityList.length,
               itemBuilder: (listContext, position) {
                 var city = cityListUtils.cityList[position];
                 if (city is CityModel) {
                   return new GestureDetector(
                       behavior: HitTestBehavior.translucent,
                       child: new Container(
                           decoration: new BoxDecoration(
                               border: new Border.all(
                                   color: AppColor.bg1, width: 0.5)),
                           height: 48.0,
                           padding: EdgeInsets.only(left: 15.0),
                           alignment: Alignment.centerLeft,
                           child: new Text(city.name)),
                       onTap:selectCity(city));
                 } else if (city is CityLabel) {
                   return new Container(
                     width: MediaQuery.of(context).size.width,
                     height: 20.0,
                     padding: EdgeInsets.only(left: 15.0),
                     child: new Text(city.keyLabel),
                     color: AppColor.bg1,
                   );
                 }
               }));

城市列表数据处理

城市列表的数据格式如下

{"A":[{"name":"澳门","id":"***","fullWord":"aomen","first":"am","isShow":"true"}]}

数据解析使用到dart:convert包，调用json.decode(jsonStr)解析的数据为map，在将Map转为具体的实体，实体解析工具推荐使用开源工具自动生成模型文件 FlutterJsonBeanFactory  
得到城市实体的解析Model如下：

import 'dart:convert' show json;
    
    class CityModel {
      String first;
      String fullWord;
      String id;
      String isShow;
      String name;
      bool isSelected = false;
    
      CityModel.fromParams(
          {this.first, this.fullWord, this.id, this.isShow, this.name});
    
      factory CityModel(jsonStr) => jsonStr is String
          ? CityModel.fromJson(json.decode(jsonStr))
          : CityModel.fromJson(jsonStr);
    
      CityModel.fromJson(jsonRes) {
        first = jsonRes['first'];
        fullWord = jsonRes['fullWord'];
        id = jsonRes['id'];
        isShow = jsonRes['isShow'];
        name = jsonRes['name'];
      }
    
      @override
      String toString() {
        return '{"first": ${first != null?'${json.encode(first)}':'null'},"fullWord": ${fullWord != null?'${json.encode(fullWord)}':'null'},"id": ${id != null?'${json.encode(id)}':'null'},"isShow": ${isShow != null?'${json.encode(isShow)}':'null'},"name": ${name != null?'${json.encode(name)}':'null'}}';
      }
    }

将首字母，城市数据存入CityList里，并将首字母列表传入到SliderBar中，记录字母索引所在的位置

class CityListUtils {
      List cityList = [];
      List<String> labelList = [];
      Map<String, IndexPosition> mapKey = {};
    
      void parse(var map) {
        if (map is String) {
          map = json.decode(map);
        }
        Map mapList = map['destination'];
        int index = 0, labelPosition = 0;
        mapList.keys.forEach((key) {
          cityList.add(new CityLabel(key));
          labelList.add(key);
          mapKey[key] = new IndexPosition(labelPosition, index);
          labelPosition++;
          index++;
          for (var value in mapList[key]) {
            index++;
            cityList.add(new CityModel(value));
          }
          ;
        });
      }
    }

联动处理  
当滑动SliderBar时，应将城市列表滑到对应的位置，ListView 提供 ScrollController 去为ListView 添加监听及 Auto scroll ListView，  
里面对应的有两个方法可以滑动,一个是带有动画 animateTo，一个不带有动画的滑动 jumpTo，此处使用不带有的方法，传递参数为  
滑动的偏移量，实现如下

OnChangeSelect onChangeSelect = (keyLabel) {
            IndexPosition index = cityListUtils.mapKey[keyLabel];
            scrollController.jumpTo(index.total * 48.0 - index.label * 28.0);
          };

其中 OnChangeSelect定义为

typedef OnChangeSelect(String keyLabel);

使用接口回调的方式将选中的key回传，并使用CityListUtils里存储的mapKey找到对应的首字母索引，计算出ListView应该滑动的偏移量

遇到的问题  
计算的偏移量不准，导致滑动不能准确定位到首字母索引上。  
原因：item 使用 Container布局 高度未限制，手动获取到的高度不准确  
解决方法：使用固定的item高度

[And]: https://blog.csdn.net/dingdegao/article/details/96480634
[20190719111203351.gif]: /images/20211113/4e011b402c7c485292593e4954b0896c.png