Flutter 側滑欄及城市選擇UI的實現(xiàn)方法
Flutter簡介
Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界,F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用,并且Flutter是完全免費、開源的。
它也是構建未來的Google Fuchsia 應用的主要方式。
目前移動市場上很多業(yè)務都需要開發(fā)Android/IOS兩個端,開發(fā)成本比較高. Flutter 在跨端上憑借著性能優(yōu)勢關注量,使用度也持續(xù)上升.今天給大家分享在去年就寫的一個Flutter版本的側滑欄.
實現(xiàn)
先上一張實現(xiàn)效果圖
SliderBar 實現(xiàn)
側邊是一個支持手勢滑動的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 ], );
手勢數(shù)據(jù)處理
Flutter 提供 手勢處理類 GestureDetector,當手勢開始滑動是更新中央Label顯示,停止或者取消時,取消Label顯示并把對應的數(shù)據(jù)填充到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 監(jiān)聽的手勢很多,當注冊 onVerticalDragUpdate 后,onPanUpdate 不在回調,解決方法:將onPanUpdate邏輯全部移入onVerticalDragUpdate,
- onPanUp 未監(jiān)聽到手勢抬起,解決方法:換用onPanCancel,onVerticalDragEnd方法監(jiān)聽
updateLabel,獲取具體選中Label的index 公式為 index = dy / widgetHeight * labelList.length
,其中dy 為 以控件起始點y的位置偏移量,widgetHeight為高度, labelList.length為Label的長度,刷新數(shù)據(jù)邏輯如下:
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();
城市選擇主界面實現(xiàn)
主布局
采用了Flutter 的Stack布局(非常類似Android FrameLayout),下層是城市選擇頁面數(shù)據(jù),上層蓋了一層SliderBar
new Scaffold( appBar: getAppBar(), body: new Stack(children: <Widget>[ getShowContentView(), new SlideBar( cityListUtils.labelList, onChangeSelect) ]));
UI的下層 使用 ListView.builder 根據(jù)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, ); } }));
城市列表數(shù)據(jù)處理
城市列表的數(shù)據(jù)格式如下
{"A":[{"name":"澳門","id":"***","fullWord":"aomen","first":"am","isShow":"true"}]}
數(shù)據(jù)解析使用到dart:convert
包,調用json.decode(jsonStr)
解析的數(shù)據(jù)為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'}}'; } }
將首字母,城市數(shù)據(jù)存入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)); } ; }); } }
聯(lián)動處理
當滑動SliderBar時,應將城市列表滑到對應的位置,ListView 提供 ScrollController 去為ListView 添加監(jiān)聽及 Auto scroll ListView, 里面對應的有兩個方法可以滑動,一個是帶有動畫 animateTo,一個不帶有動畫的滑動 jumpTo,此處使用不帶有的方法,傳遞參數(shù)為 滑動的偏移量,實現(xiàn)如下
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的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
Android 仿微信自定義數(shù)字鍵盤的實現(xiàn)代碼
本篇文章主要介紹了Android 仿微信自定義數(shù)字鍵盤的實現(xiàn)代碼,具有一定的參考價值,有興趣的可以了解一下2017-07-07Android自定義View實現(xiàn)跟隨手指移動的小兔子
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)跟隨手指移動的小兔子,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11Windows下React Native的Android環(huán)境部署及布局示例
這篇文章主要介紹了Windows下React Native的Android環(huán)境部署及布局示例,這里安卓開發(fā)IDE建議使用Android Studio,且為Windows安裝npm包管理器,需要的朋友可以參考下2016-03-03Kotlin之自定義 Live Templates詳解(模板代碼)
這篇文章主要介紹了Kotlin之自定義 Live Templates詳解(模板代碼),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android 關閉多個Activity的實現(xiàn)方法
這篇文章主要介紹了Android 關閉多個Activity的實現(xiàn)方法的相關資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09