Flutter侧边栏控件-SideBar

最新推荐文章于 2025-03-10 20:41:08 发布

Yuzopro

最新推荐文章于 2025-03-10 20:41:08 发布

阅读量1.6k

点赞数

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/Yuzopro/article/details/97677250

版权

前言

SideBar是APP开发当中常见的功能之一，多用于索引列表，如城市选择，分类等。在优化OpenGit趋势列表时，由于在选择语言时需要用到这样的控件，尝试开发了这个控件，效果如下图所示

准备

完成SideBar需要向外提供以下参数

SideBar宽以及每个letter的高度；
默认背景色和文本颜色；
按下时的背景色和文本颜色；
当前选中letter的回调；
索引列表；

选中letter的回掉函数如下所示

typedef OnTouchingLetterChanged = void Function(String letter);

索引列表数据如下面代码所示

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，构造函数如下所示

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的状态来判断背景色的展示，相关代码如下所示

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 :