自定义水平刻度尺——RulerView

一、效果展示

---

二、核心思路

很多时候都无法直接使用flutter系统组件或第三方组件实现UI设计图，一般这种时候我们都会选择绘制自定义组件以达到效果。

---

三、实现方案

1、确认绘制需要的参数

1.value //初始刻度 

2.minValue  //尺子的最小刻度

3.maxValue  //尺子的最大刻度

4.step  //步数，即一个刻度的值

5.width  //尺子的宽度

6.height  //尺子的高度

7.subScaleCountPerScale  //每个大刻度的子刻度数

8.subScaleWidth  //单个刻度的宽度

9.scaleColor  //刻度颜色

10.scaleTextColor  //刻度文字颜色

11.scaleTextFontSize   //刻度文字的大小

12.paddingItemWidth  //左右空白间距宽度

13.Function(double) onSelectedChanged   //刻度尺选择结果回调

2、制定滑动方案

不论是刻度还是文字的绘制，都是相对容易的，重点是实现尺子的滑动效果。

因为两边留白（如图1、图2所示），所以考虑使用ListView来实现效果。使用ScrollController滑动控制器来初始化和更新刻度尺指示的位置。

图1

图2
​​​​​​

同时使用NotificationListener来监听刻度尺的滚动通知，用于实时更新滑动控制器和滑动结果的回调。 参考代码如下：

NotificationListener(
        onNotification: _onNotification,
        child: ListView.builder(
          physics: const ClampingScrollPhysics(),
          padding: const EdgeInsets.all(0),
          controller: _scrollController,
          scrollDirection: Axis.horizontal,
          itemCount: 3,
          itemBuilder: (BuildContext context, int index) {
            //两边的空白控件
            if (index == 0 || index == 2) {
              return SizedBox(
                // widget.paddingItemWidth是空白控件的宽度，这个是根据
                // 刻度尺的展示大小计算出来的，后面给到全部参考代码的时候会讲
                width: widget.paddingItemWidth,
                height: 0,
              );
            } else {
              //刻度尺
              return RealRulerView(
                subGridCount: widget.totalSubScaleCount,
                subScaleWidth: widget.subScaleWidth,
                step: widget.step,
                minValue: widget.minValue,
                height: widget.height,
                scaleColor: widget.scaleColor,
                scaleTextFontSize: widget.scaleTextFontSize,
                scaleTextColor: widget.scaleTextColor,