背景
在使用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,所以无法在布局阶段完成之后做其他操作。这块可以再深入研究一下