阅读 745

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 监听的手势很多,当注册 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高度

关注下面的标签,发现更多相似文章
评论