索引条：手势及clamp函数

768 字

4 分钟

索引条：手势及clamp函数

2021-11-21

2026-10-12

Flutter

无标签

前言#

在进行类似联系人页面的开发过程中，我们经常会遇到侧边栏索引条。在iOS中我们只需要简单设置即可使用系统提供的控件。

这里我们使用 Flutter 自定义一个索引条，来熟悉一些常用的知识点。

一、一个索引条包含什么？#

数据源
- 索引数组
点击手势
滑动手势
事件回调

二、开始布局#

索引条展示的数据是可变的，所以这里我们使用有状态的Widget进行布局。这里以 Container + Column 进行基础封装，看看效果。

1
import 'package:flutter/material.dart';
2

3
class IndexBar extends StatefulWidget {
4
  IndexBar({
5
    required this.dataSource,
6
  });
7

8
  final List<String> dataSource;
9
  final double _indexItemHeight = 22;
10

11
  @override
12
  _IndexBarState createState() => _IndexBarState();
13
}
14

15
class _IndexBarState extends State<IndexBar> {
16
  List<Widget> _indexsWidgets = [];
17

18
  @override
19
  void initState() {
20
    super.initState();
21

22
    for (int i = 0; i < widget.dataSource.length; i++) {
23
      _indexsWidgets.add(Container(
24
        height: widget._indexItemHeight,
25
        child: Text(
26
          widget.dataSource[i],
27
          style: const TextStyle(color: Colors.grey),
28
        ),
29
      ));
30
    }
31
  }
32

33
  @override
34
  Widget build(BuildContext context) {
35
    return GestureDetector(
36
      onTapUp: (details) {
37
        RenderBox box = context.findRenderObject() as RenderBox;
38
        Offset point = box.globalToLocal(details.globalPosition);
39
        double y = point.dy;
40
        // 在当前 Widget 内的 Offset
41
        print(y);
42
      },
43
      child: Container(
44
        width: 22,
45
        color: const Color.fromRGBO(1, 1, 1, 0.2),
46
        child: Column(
47
          mainAxisAlignment: MainAxisAlignment.center,
48
          crossAxisAlignment: CrossAxisAlignment.center,
49
          children: _indexsWidgets,
50
        ),
51
      ),
52
    );
53
  }
54
}

基础使用，传入索引数组：

1
  @override
2
  Widget build(BuildContext context) {
3
    return Scaffold(
4
      ...
5
      body: Stack(
6
        children: [
7
          Container(...),
8
          Align(
9
            alignment: Alignment.centerRight,
10
            child: Column(
11
              mainAxisAlignment: MainAxisAlignment.center,
12
              children: [
13
                IndexBar(dataSource: _indexs)
14
              ],
15
            ),
16
          ),
17
        ],
18
      )
19
    );
20
  }

这里我们完成了基础布局，和数据源的传入，下面我们继续完善。

三、点击事件#

这里我们需要定位到具体点击了哪个 index 所以 onTap 不能够满足，这里通过注释我们可以发现 onTapUp 回调带有更多信息。我们使用这个进行点击事件的处理

typedef GestureTapUpCallback = void Function(TapUpDetails details);

现在我们能够获取点击坐标了，接下来进行计算获得具体 index。

1
flutter: L
2
flutter: N
3
flutter: E
4
flutter: B
5
flutter: J
6
flutter: L
7
flutter: J
8
flutter: K
9
flutter: N
10
flutter: J
11
flutter: F

四、滑动事件#

和点击事件类似，这里我们添加一下滑动选择事件：

1
onVerticalDragUpdate: (details) {
2
  RenderBox box = context.findRenderObject() as RenderBox;
3
  Offset point = box.globalToLocal(details.globalPosition);
4
  print('onVerticalDragUpdate${widget.dataSource[_currentIndex(point)]}');
5
},
6
onTapUp: (details) {
7
  RenderBox box = context.findRenderObject() as RenderBox;
8
  Offset point = box.globalToLocal(details.globalPosition);
9
  print('onTapUp${widget.dataSource[_currentIndex(point)]}');
10
},

测试有效：

1
flutter: onVerticalDragUpdateF
2
flutter: onVerticalDragUpdateF
3
flutter: onVerticalDragUpdateH
4
flutter: onVerticalDragUpdateH
5
flutter: onVerticalDragUpdateH

五、事件回调#

内部的事件处理完成了，我们来来添加一下外部的回调：

定义回调类型#

1
typedef IndexBarSelectCallBack = void Function(int index,  String title);
2

3
class IndexBar extends StatefulWidget {
4
  IndexBar({
5
    required this.dataSource,
6
    required this.callBack
7
  });
8

9
  final List<String> dataSource;
10
  final double _indexItemHeight = 22;
11
  final IndexBarSelectCallBack callBack;
12

13
  @override
14
  _IndexBarState createState() => _IndexBarState();
15
}

调整事件处理及回调#

1
onVerticalDragUpdate: (details) {
2
  RenderBox box = context.findRenderObject() as RenderBox;
3
  Offset point = box.globalToLocal(details.globalPosition);
4
  int index = _currentIndex(point);
5
  String title = widget.dataSource[index];
6
  widget.callBack(index, title);
7
},
8
onTapUp: (details) {
9
  RenderBox box = context.findRenderObject() as RenderBox;
10
  Offset point = box.globalToLocal(details.globalPosition);
11
  int index = _currentIndex(point);
12
  String title = widget.dataSource[index];
13
  widget.callBack(index, title);
14
},

外部传入回调#

六、 Clamp 函数#

在滑动偏移过大超出范围的时候会发生越界，出现下面的警告

RangeError (index): Invalid value: Not in inclusive range 0..10: 14

这里安利一个很好用的函数 clamp 来对方法 _currentIndex(Offset point) 进行一下优化：

1
int _currentIndex(Offset point) {
2
  return (point.dy ~/ widget._indexItemHeight).clamp(0, widget.dataSource.length - 1);
3
}

这样就对返回的值的范围作出了限制。

七、最终代码#

https://github.com/RyukieSama/FlutterStudy/blob/master/fake_wechat/lib/widgets/contacts/index_bar.dart

ListView滑动到指定位置

有状态Widget初始化重写&链式调用&排序

前言#

一、 一个索引条包含什么？#

二、 开始布局#

三、 点击事件#

四、 滑动事件#

五、 事件回调#