欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter 側(cè)滑欄及城市選擇UI的實(shí)現(xiàn)方法

 更新時(shí)間：2019年07月20日 09:17:06   作者：北斗星_And  
這篇文章主要介紹了Flutter 側(cè)滑欄及城市選擇UI的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Flutter簡介

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。
它也是構(gòu)建未來的Google Fuchsia 應(yīng)用的主要方式。

目前移動(dòng)市場上很多業(yè)務(wù)都需要開發(fā)Android/IOS兩個(gè)端，開發(fā)成本比較高. Flutter 在跨端上憑借著性能優(yōu)勢關(guān)注量，使用度也持續(xù)上升.今天給大家分享在去年就寫的一個(gè)Flutter版本的側(cè)滑欄.

實(shí)現(xiàn)

先上一張實(shí)現(xiàn)效果圖


SliderBar 實(shí)現(xiàn)

側(cè)邊是一個(gè)支持手勢滑動(dòng)的SliderBar,一個(gè)自定義的StatefulWidget.可以觀察到，當(dāng)手勢在側(cè)邊滑動(dòng)時(shí)，中央顯示選中的標(biāo)簽.

布局

一個(gè)橫向布局，里面放了一個(gè)元素。左邊標(biāo)簽的容器盡量占滿整個(gè)屏幕,右邊固定寬度的一個(gè)列表（里面放需要展示的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,當(dāng)手勢開始滑動(dòng)是更新中央Label顯示，停止或者取消時(shí)，取消Label顯示并把對應(yīng)的數(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)聽的手勢很多，當(dāng)注冊 onVerticalDragUpdate 后，onPanUpdate 不在回調(diào)，解決方法：將onPanUpdate邏輯全部移入onVerticalDragUpdate，
  • onPanUp 未監(jiān)聽到手勢抬起，解決方法：換用onPanCancel，onVerticalDragEnd方法監(jiān)聽

updateLabel，獲取具體選中Label的index 公式為 index = dy / widgetHeight * labelList.length,其中dy 為 以控件起始點(diǎn)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();

城市選擇主界面實(shí)現(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包，調(diào)用json.decode(jsonStr)解析的數(shù)據(jù)為map，在將Map轉(zhuǎn)為具體的實(shí)體，實(shí)體解析工具推薦使用開源工具自動(dòng)生成模型文件 FlutterJsonBeanFactory 得到城市實(shí)體的解析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)動(dòng)處理

當(dāng)滑動(dòng)SliderBar時(shí)，應(yīng)將城市列表滑到對應(yīng)的位置，ListView 提供 ScrollController 去為ListView 添加監(jiān)聽及 Auto scroll ListView， 里面對應(yīng)的有兩個(gè)方法可以滑動(dòng),一個(gè)是帶有動(dòng)畫 animateTo，一個(gè)不帶有動(dòng)畫的滑動(dòng) jumpTo，此處使用不帶有的方法，傳遞參數(shù)為 滑動(dòng)的偏移量，實(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);

使用接口回調(diào)的方式將選中的key回傳，并使用CityListUtils里存儲的mapKey找到對應(yīng)的首字母索引，計(jì)算出ListView應(yīng)該滑動(dòng)的偏移量

遇到的問題

計(jì)算的偏移量不準(zhǔn)，導(dǎo)致滑動(dòng)不能準(zhǔn)確定位到首字母索引上。

原因：item 使用 Container布局 高度未限制，手動(dòng)獲取到的高度不準(zhǔn)確

解決方法：使用固定的item高度

總結(jié)

以上所述是小編給大家介紹的Flutter 側(cè)滑欄及城市選擇UI的實(shí)現(xiàn)方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

相關(guān)文章

最新評論