Flutter側(cè)邊欄控件-SideBar

前言

SideBar是APP開發(fā)當中常見的功能之一，多用于索引列表，如城市選擇，分類等。在優(yōu)化OpenGit趨勢列表時，由于在選擇語言時需要用到這樣的控件，嘗試開發(fā)了這個控件，效果如下圖所示

image

準備

完成SideBar需要向外提供以下參數(shù)

  1. SideBar寬以及每個letter的高度；
  2. 默認背景色和文本顏色；
  3. 按下時的背景色和文本顏色；
  4. 當前選中l(wèi)etter的回調(diào)；
  5. 索引列表；

選中l(wèi)etter的回掉函數(shù)如下所示

typedef OnTouchingLetterChanged = void Function(String letter);

索引列表數(shù)據(jù)如下面代碼所示

const List<String> A_Z_LIST = const [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
  "#"
];

當按下SideBar時需要刷新UI，所以SideBar需要繼承StatefulWidget，構(gòu)造函數(shù)如下所示

class SideBar extends StatefulWidget {
  SideBar({
    Key key,
    @required this.onTouch,
    this.width = 30,
    this.letterHeight = 16,
    this.color = Colors.transparent,
    this.textStyle = const TextStyle(
      fontSize: 12.0,
      color: Color(YZColors.subTextColor),
    ),
    this.touchDownColor = const Color(0x40E0E0E0),
    this.touchDownTextStyle = const TextStyle(
      fontSize: 12.0,
      color: Color(YZColors.mainTextColor),
    ),
  });

  final int width;

  final int letterHeight;

  final Color color;

  final Color touchDownColor;

  final TextStyle textStyle;

  final TextStyle touchDownTextStyle;

  final OnTouchingLetterChanged onTouch;
}

封裝SideBar

在_SideBarState中，需要通過touch的狀態(tài)來判斷背景色的展示，相關(guān)代碼如下所示

class _SideBarState extends State<SideBar> {
  bool _isTouchDown = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: _isTouchDown ? widget.touchDownColor : widget.color,
      width: widget.width.toDouble(),
      child: _SlideItemBar(
        letterWidth: widget.width,
        letterHeight: widget.letterHeight,
        textStyle: _isTouchDown ? widget.touchDownTextStyle : widget.textStyle,
        onTouch: (letter) {
          if (widget.onTouch != null) {
            setState(() {
              _isTouchDown = !TextUtil.isEmpty(letter);
            });
            widget.onTouch(letter);
          }
        },
      ),
    );
  }
}

上面代碼，主要部分通過_SlideItemBar的letter狀態(tài)的改變來刷新Container的color，下面看下_SlideItemBar的實現(xiàn)，相關(guān)代碼如下所示

class _SlideItemBar extends StatefulWidget {
  final int letterWidth;

  final int letterHeight;

  final TextStyle textStyle;

  final OnTouchingLetterChanged onTouch;

  _SlideItemBar(
      {Key key,
      @required this.onTouch,
      this.letterWidth = 30,
      this.letterHeight = 16,
      this.textStyle})
      : assert(onTouch != null),
        super(key: key);

  @override
  _SlideItemBarState createState() {
    return _SlideItemBarState();
  }
}

上文代碼，沒有做過多的操作，只是定義了幾個變量，詳細的操作在_SlideItemBarState。
在_SlideItemBarState中，需要知道每個letter在垂直方向上的偏移高度，如下面代碼所示

void _init() {
    _letterPositionList.clear();
    _letterPositionList.add(0);
    int tempHeight = 0;
    A_Z_LIST?.forEach((value) {
      tempHeight = tempHeight + widget.letterHeight;
      _letterPositionList.add(tempHeight);
    });
}

填充每個letter widget，并設(shè)置固定寬高，代碼如下所示

List<Widget> children = List();
A_Z_LIST.forEach((v) {
    children.add(SizedBox(
        width: widget.letterWidth.toDouble(),
        height: widget.letterHeight.toDouble(),
        child: Text(v, textAlign: TextAlign.center, style: _style),
    ));
});

在滑動SideBar過程中，需要檢測手勢事件，代碼如下所示

GestureDetector(
      onVerticalDragDown: (DragDownDetails details) {
        //計算索引列表距離頂部的距離
        if (_widgetTop == -1) {
          RenderBox box = context.findRenderObject();
          Offset topLeftPosition = box.localToGlobal(Offset.zero);
          _widgetTop = topLeftPosition.dy.toInt();
        }
        //獲取touch點在索引列表的偏移值
        int offset = details.globalPosition.dy.toInt() - _widgetTop;
        int index = _getIndex(offset);
        //判斷索引是否在列表中，如果存在，則通知上層更新數(shù)據(jù)
        if (index != -1) {
          _lastIndex = index;
          _triggerTouchEvent(A_Z_LIST[index]);
        }
      },
      onVerticalDragUpdate: (DragUpdateDetails details) {
        //獲取touch點在索引列表的偏移值
        int offset = details.globalPosition.dy.toInt() - _widgetTop;
        int index = _getIndex(offset);
        //并且前后兩次的是否一致，如果不一致，則通知上層更新數(shù)據(jù)
        if (index != -1 && _lastIndex != index) {
          _lastIndex = index;
          _triggerTouchEvent(A_Z_LIST[index]);
        }
      },
      onVerticalDragEnd: (DragEndDetails details) {
        _lastIndex = -1;
        _triggerTouchEvent('');
      },
      onTapUp: (TapUpDetails details) {
        _lastIndex = -1;
        _triggerTouchEvent('');
      },
      //填充UI
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: children,
      ),
    )

上文代碼，在onVerticalDragDown事件時，首次獲取索引距離頂部的高度，并通過touch點的y坐標獲取到touch點在偏移值，并通過該值找到目前touch的索引，記錄該狀態(tài)，并通知上層ui；在onVerticalDragUpdate事件時，獲取索引跟onVerticalDragDown一致，只是多了出重的操作。而onVerticalDragEnd和onTapUp代表touch事件的結(jié)束。到此，可以獲取到觸摸SideBar時，回掉的letter數(shù)據(jù)。

展示letter

SideBar通常展示在ListView的上面，父容器我們采用Stack，如下面代碼所示

@override
Widget build(BuildContext context) {
    super.build(context);

    return Scaffold(
      body: Stack(
        children: <Widget>[
          _buildSideBar(context),
          _buildLetterTips(),
        ],
      ),
    );
}

Widget _buildSideBar(BuildContext context) {
    return Offstage(
      offstage: widget.offsetBuilder == null,
      child: Align(
        alignment: Alignment.centerRight,
        child: SideBar(
          onTouch: (letter) {
            setState(() {
              _letter = letter;
            });
          },
        ),
      ),
    );
}

Widget _buildLetterTips() {
    return Offstage(
      offstage: TextUtil.isEmpty(_letter),
      child: Align(
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          width: 65.0,
          height: 65.0,
          color: Color(0x40000000),
          child: Text(
            TextUtil.isEmpty(_letter) ? '' : _letter,
            style: YZConstant.largeLargeTextWhite,
          ),
        ),
      ),
    );
}

當接收到letter發(fā)生改變時，會通過setState刷新ui，當_letter不為空時，就會展示當前l(fā)etter的提示。

滾動ListView

滾動ListView目前只發(fā)現(xiàn)兩種方法，如下面代碼所示

//帶動畫的滾動
scrollController.animateTo(double offset);
//不帶動畫的滾動
scrollController.jumpTo(double offset);

由于上述兩種方法都需要知道滾動的具體位置，所以需要知道ListView列表的每個item相對于屏幕頂部的偏移量，所以高度必須是固定的。

獲取語言列表數(shù)據(jù)

調(diào)用接口https://github-trending-api.now.sh/languages，并封裝bean對象，如下面代碼所示

List<TrendingLanguageBean> getTrendingLanguageBeanList(List<dynamic> list) {
  List<TrendingLanguageBean> result = [];
  list.forEach((item) {
    result.add(TrendingLanguageBean.fromJson(item));
  });
  return result;
}

@JsonSerializable()
class TrendingLanguageBean extends Object {
  @JsonKey(name: 'id')
  String id;

  @JsonKey(name: 'name')
  String name;

  String letter;

  bool isShowLetter;

  TrendingLanguageBean(this.id, this.name, {this.letter});

  factory TrendingLanguageBean.fromJson(Map<String, dynamic> srcJson) =>
      _$TrendingLanguageBeanFromJson(srcJson);

  Map<String, dynamic> toJson() => _$TrendingLanguageBeanToJson(this);
}

對獲取到的數(shù)據(jù)進行排序，如下面代碼所示

void _sortListByLetter(List<TrendingLanguageBean> list) {
    if (list == null || list.isEmpty) return;
    list.sort(
      (a, b) {
        if (a.letter == "@" || b.letter == "#") {
          return -1;
        } else if (a.letter == "#" || b.letter == "@") {
          return 1;
        } else {
          return a.letter.compareTo(b.letter);
        }
      },
    );
}

通過語言對應的首字母，設(shè)置其展示狀態(tài)，如下面代碼所示

void _setShowLetter(List<TrendingLanguageBean> list) {
    if (list != null && list.isNotEmpty) {
      String tempLetter;
      for (int i = 0, length = list.length; i < length; i++) {
        TrendingLanguageBean bean = list[i];
        String letter = bean.letter;
        if (tempLetter != letter) {
          tempLetter = letter;
          bean.isShowLetter = true;
        } else {
          bean.isShowLetter = false;
        }
      }
    }
}

列表數(shù)據(jù)已經(jīng)準備完畢，初始化單個item的高度，如下面代碼所示

double getLetterHeight() => 48.0;

double getItemHeight() => 56.0;

然后進一步計算每個letter在ListView中所處的高度，如下面代碼所示

void _initListOffset(List<TrendingLanguageBean> list) {
    _letterOffsetMap.clear();
    double offset = 0;
    String letter;
    list?.forEach((v) {
      if (letter != v.letter) {
        letter = v.letter;
        _letterOffsetMap.putIfAbsent(letter, () => offset);
        offset = offset + getLetterHeight() + getItemHeight();
      } else {
        offset = offset + getItemHeight();
      }
    });
}

通過letter獲取滾動的指定高度，如下面代碼所示

double getOffset(String letter) => _letterOffsetMap[letter];

當獲取到高度后，完成ListView的滾動，如下面代碼所示

if (offset != null) {
    _scrollController.jumpTo(offset.clamp(
            .0, _scrollController.position.maxScrollExtent));
}

使用CustomPainter封裝SideBar

上文SideBar的封裝，用SizeBox封裝每個letter，然后存放在List<Widget>列表中，最后填充Column，如下面代碼所示

List<Widget> children = List();
A_Z_LIST.forEach((v) {
    children.add(SizedBox(
        width: widget.letterWidth.toDouble(),
        height: widget.letterHeight.toDouble(),
        child: Text(v, textAlign: TextAlign.center, style: _style),
    ));
});

child: Column(
    mainAxisSize: MainAxisSize.min,
    children: children,
),

下面用CustomPainter實現(xiàn)SideBar，如下面代碼所示

class _SideBarPainter extends CustomPainter {
  final TextStyle textStyle;
  final int width;
  final int height;

  TextPainter _textPainter;

  _SideBarPainter(this.textStyle, this.width, this.height) {
    _textPainter = new TextPainter(
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr,
    );
  }

  @override
  void paint(Canvas canvas, Size size) {
    int length = A_Z_LIST.length;

    for (int i = 0; i < length; i++) {
      _textPainter.text = new TextSpan(
        text: A_Z_LIST[i],
        style: textStyle,
      );

      _textPainter.layout();
      _textPainter.paint(
          canvas, Offset(width.toDouble() / 2, i * height.toDouble()));
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

使用_SideBarPainter如下面代碼所示

child: CustomPaint(
    painter: _SideBarPainter(
        widget.textStyle, widget.width, widget.letterHeight),
    size: Size(widget.width.toDouble(), _height),
),

項目源碼

OpenGit_Fultter

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ￥開啟￥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,390評論 0贊 17
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,689評論 1贊 32
  • 涉及到的內(nèi)容： 首先會ListView或RecyclerView的多布局。 自定義View右側(cè)拼音列表，簡單地繪制...
    重拾丟卻的夢閱讀 2,856評論 0贊 2
  • 內(nèi)容是博主照著書敲出來的，博主碼字挺辛苦的，轉(zhuǎn)載請注明出處，后序內(nèi)容陸續(xù)會碼出。 前言：ListView——列表，...
    Blankj閱讀 2,520評論 2贊 47
  • 根據(jù)“回頭看”工作要求，1月9號海口市海洋與漁業(yè)局安排張光磊、王綏江、陳壯俊三名工作人員前往燈塔酒店施工便道...
    陳壯俊閱讀 199評論 0贊 0

友情鏈接更多精彩內(nèi)容