Flutter 侧滑栏及城市选择UI的实现方法
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高度
- Codeforces 842A Kirill And The Game【暴力,水】
- Wannafly模拟赛 A.矩阵(二分答案+hash)
- 【Java数据结构学习笔记之一】线性表的存储结构及其代码实现
- Comparison of Apache Stream Processing Frameworks: Part 1
- 【LeetCode】关关的刷题日记23——Leetcode 66. Plus One
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861A k-roun
- 【Java数据结构学习笔记之二】Java数据结构与算法之栈(Stack)实现
- 【Java数据结构学习笔记之三】Java数据结构与算法之队列(Queue)实现
- Comparison of Apache Stream Processing Frameworks: Part 2
- 2017 Multi-University Training Contest - Team 9 1005&&HDU 6165 FFF at Valentine【强联通缩点+拓扑排序】
- 2017 Multi-University Training Contest - Team 9 1004&&HDU 6164 Dying Light【数学+模拟】
- Python3选择排序
- 【DeepMind 公开课-深度强化学习教程代码实战01】迭代法评估4*4方格世界下的随机策略
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861C Did yo
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于kubernetes垃圾回收那点事
- 强化学习笔记11:工程师看强化学习
- 强化学习笔记10:经典游戏示例 classic games
- RL实践3——为Agent添加Policy、记忆功能
- 强化学习仿真环境搭建入门Getting Started with OpenAI gym
- 数据分析与数据挖掘 - 04科学计算
- SwiftUI:使用 @EnvironmentObject 从环境中读取自定义值
- JavaScript 启动性能瓶颈分析与解决方案
- 大白话理解Vuex
- 【Java面试总结】计算机网络
- volatile关键字 Krains 2020-08-26
- synchronized关键字 Krains 2020-08-25
- happens-before Krains 2020-08-26
- ReentrantLock可重入锁 Krains 2020-08-27
- Java中的线程 Krains 2020-08-24