Flutter 側滑欄及城市選擇UI的實現

時間 2019-11-06

標籤 flutter 側滑城市選擇實現简体版

原文原文鏈接

Flutter 側滑欄UI及城市選擇UI的實現

前言

目前移動市場上不少業務都須要開發Android/IOS兩個端，開發成本比較高. Flutter 在跨端上憑藉着性能優點關注量，使用度也持續上升.今天給你們分享在去年就寫的一個Flutter版本的側滑欄.json

實現

先上一張實現效果圖bash

SliderBar 實現

側邊是一個支持手勢滑動的SliderBar,一個自定義的StatefulWidget.能夠觀察到，當手勢在側邊滑動時，中央顯示選中的標籤.app

佈局

一個橫向佈局，裏面放了一個元素。左邊標籤的容器儘可能佔滿整個屏幕,右邊固定寬度的一個列表（裏面放須要展現的Label),代碼以下:ide

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),下層是城市選擇頁面數據，上層蓋了一層SliderBarui

new Scaffold(
        appBar: getAppBar(),
        body: new Stack(children: <Widget>[
          getShowContentView(),
          new SlideBar(
              cityListUtils.labelList, onChangeSelect)
        ]));
複製代碼

UI的下層使用 ListView.builder 根據item類型返回不一樣類型的Widgetthis

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高度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。