Flutter自制Slider遇到的问题记录

139 阅读1分钟

背景

在使用Flutter制作自定义Slider控件时,主要遇到以下问题:

  • 如何获取Slider控件的宽度
  • 第一次build时无法通过RenderObject为空

如何获取Slider控件的宽度

通过简单的搜索,基本上都是通过GlobalKey来获取Widget的尺寸,_widgetKey被赋值在需要测量尺寸的Widget上

Size _getRootWidth() {
    final RenderBox renderBox =
        _widgetKey.currentContext?.findRenderObject() as RenderBox;
    final Size size = renderBox.size;
    return size;
}

第一次build时无法获取宽度

GlobalKey可以解决Slider滑动过程中百分比的计算。但是第一次build时,需要从百分比计算左侧的margin大小,就无法做到了,因为第一次GlobalKey还没有拿到currentContext。为了解决这个问题,使用了一个Timer做延迟,如果currentContext为空,延迟计算左侧的margin大小

if (_widgetKey.currentContext == null) {
    const timeout = const Duration(microseconds: 0);
    Timer(timeout, () {
    setState(() {
        final totalWidth = _getRootWidth().width;
        const leftLimit = -(_sliderBlockTapWidth - _sliderBlockWidth) / 2;
        final rightLimit = totalWidth - (_sliderBlockTapWidth + leftLimit);
        leftMargin = leftLimit + (rightLimit - leftLimit) * percent;
    });
    });
}

更进一步

按照iOS的开发思路,应该可以通过自定义绘制,在绘制阶段计算位置,目前直接使用的widget,所以无法在布局阶段完成之后做其他操作。这块可以再深入研究一下