Flutter简介
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia 应用的主要方式。
目前移动市场上很多业务都需要开发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高度
总结
以上所述是小编给大家介绍的Flutter 侧滑栏及城市选择UI的实现方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
本文标题: Flutter 侧滑栏及城市选择UI的实现方法
以上就上有关Flutter侧滑栏及城市选择UI的实现方法的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。