前言
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 :