【Flutter 專題】98 易忽略的【小而巧】的技術點彙總 (六)

      和尚繼續補充平常學習中遇到的很實用的技術點；

LayoutBuilder

      和尚在一些場景下須要根據父類佈局大小不一樣展現不一樣的子類 Widget，例如和尚在適配大尺寸平板或橫豎屏切換等場景時，此時須要用到 LayoutBuilder 和尚理解爲尺寸佈局構造器；

源碼分析

      簡單分析源碼可得，LayoutBuilder 是一個繼承自 ConstrainedLayoutBuilder 的構造器；經過 builder 獲取一個 BoxConstraints 對象，以後經過檢查 constraints 來肯定要展現的內容；

class LayoutBuilder extends ConstrainedLayoutBuilder<BoxConstraints> {
  const LayoutBuilder({
    Key key,
    LayoutWidgetBuilder builder,
  }) : super(key: key, builder: builder);
}

案例嘗試

      和尚經過 GridView 默認展現一行的圖標，預期是在大部分設備上展現 4個 item，隨着屏幕的變大盡量多的展現 item，當屏幕容許展現全部 item 時爲上限；因而和尚設定了單個 item 寬基礎爲 90，根據 size.maxWidth 進行判斷；

LayoutBuilder(builder: (context, size) {
  if (size.maxWidth ~/ 90 >= 4 &&
      size.maxWidth ~/ 90 <= _dataList.length) {
    _length = size.maxWidth ~/ 90;
  } else if (size.maxWidth ~/ 90 > _dataList.length) {
    _length = _dataList.length;
  } else {
    _length = 4;
  }
  return _gridWid();
}  

_gridWid() {
  return GridView.builder(
      physics: ScrollPhysics(),
      primary: false, shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: _length, mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0, childAspectRatio: 1),
      itemCount: _showMore ? _dataList.length : _length,
      itemBuilder: (context, index) {
        var dataItem = _dataList[index];
        if (index < _length - 1 || _showMore) {
          dataItem = _dataList[index];
        } else {
          dataItem = _dataList[_dataList.length - 1];
        }
        return GestureDetector(
            child: Container( color: Colors.white70,
                child: Column(mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(dataItem.icon),
                      SizedBox(height: 4),
                      Text(dataItem.text)
                    ])),
            onTap: () {
              if (_length < _dataList.length && dataItem.text == '更多') {
                _showMore = !_showMore; setState(() {});
              }
              Toast.show(dataItem.text == '更多' ? '更多' : _dataList[index].text, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
            });
      });
}

ReorderableListView

      和尚剛嘗試了 Draggable + DragTarget 實現的基本的拖拽 GridView，今天嘗試一下系統提供的 ReorderableListView 拖拽列表；

源碼分析

      簡單分析源碼可得 ReorderableListView 主要實現 children 子類 item 加載與 onReorder 拖拽子 item 到新的位置時回調；

ReorderableListView({
  Key key,
  this.header,              // 列表頭部標題
  @required this.children,  // 列表子類 item
  @required this.onReorder, // 拖拽到新位置時回調
  this.scrollDirection = Axis.vertical, // 滑動方向，水平或豎直
  this.padding,             // 內邊距，僅用於 children
  this.reverse = false,     // 是否反轉
})

案例嘗試

1. onReorder

      onReorder 是當 item 拖拽到新的位置時 ReorderCallback 回調，其中回調中返回新舊兩個數組下標用於標記；

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(title: Text('ReorderableListView Page')),
      body: ReorderableListView(
          header: Container(height: 200.0,
              child: ACEWave(waveWidth, waveHeight, 200.0,
                  startOffsetXList: startOffsetX, startOffsetYList: startOffsetY,
                  durationList: duration, waveColorList: colorList)),
          reverse: false,
          children: _listWid(),
          onReorder: (oldIndex, newIndex) {
            if (newIndex == _dataList.length) --newIndex;
            final temp = _dataList.removeAt(oldIndex);
            _dataList.insert(newIndex, temp);
            setState(() {});
          }));
}

_listData(index) {
  return Padding(
      key: ValueKey(_dataList[index]),
      padding: EdgeInsets.all(20.0),
      child: Row(children: <Widget>[
        Icon(_dataList[index].icon, color: Colors.black38),
        SizedBox(width: 10.0),
        Expanded(child: Text(_dataList[index].text)),
        Icon(Icons.arrow_right, color: Colors.black38)
      ]));
}

_listWid() => <Widget>[for (int i = 0; i < _dataList.length; i++) _listData(i)];

2. scrollDirection

      scrollDirection 爲列表滑動方向，與普通 ListView 一致，分爲 Axis.horizontal 橫行和 Axis.vertical 縱向兩種；

scrollDirection: Axis.horizontal,

3. header

      header 爲當前列表標題頭部；

_headerWid(horizontal) {
  return horizontal
      ? Container()
      : Container(height: 200.0,
          child: ACEWave(waveWidth, waveHeight, 200.0,
              startOffsetXList: startOffsetX,
              startOffsetYList: startOffsetY,
              durationList: duration,
              waveColorList: colorList));
}

4. reverse

      reverse 爲是否反轉，即初始時是不是從最後開始；

reverse: true,

5. padding

       padding 爲內邊距，但僅針對列表 children 部分，對於頭部 header 並不起效果；

padding: EdgeInsets.all(40.0),

注意事項

1. ReorderableListView 沒有相似於 ListView.builder 等構造方法，須要把 List 中全部 item 一次性加載完；

2. ReorderableListView 中全部 children item 最外層必需要有惟一的 Key；

3. 和尚測試過程當中，當拖拽到最後一個時，由於先 remove 掉這個 item 再 insert 添加 item 時，此時 dataList 數量已經減小，newIndex 須要減一處理；

---

      LayoutBuilder 案例嘗試 + ReorderableListView 案例嘗試

---

      和尚還會繼續對平常應用的小知識點進行學習和嘗試；對於底層的研究還不夠深刻，若有錯誤，請多多指導！

來源：阿策小和尚

本文分享自微信公衆號 - 阿策小和尚（gh_8297e718c166）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。