Flutter Xlider调用setState后滑块值始终为0并回弹问题求助

问题根源 #

你遇到的滑块回弹问题，核心原因是滑块的初始值被硬编码为[0]。每次调用setState()触发组件重构时，FlutterSlider都会重新读取values: [0]这个固定值，导致滑块被强制重置回0，所以拖动过程中会出现回弹现象；而如果不调用setState()，虽然滑块能正常拖动，但状态没有更新，CustomPaint也无法感知到_angleAirplane的变化，自然没法重绘线条。

解决方案 #

正如你发现的那样，我们需要自行维护滑块的当前值状态，让FlutterSlider的values属性绑定到一个动态的状态变量上，而不是固定的[0]。这样每次setState()时，滑块会读取最新的变量值，既不会回弹，也能同步更新UI（包括你的自定义线条和TextField）。

修改后的代码示例 #

Column(
 children: [
   Padding(
     padding: EdgeInsets.all(15.0),
   ),
   angleTextQuestion,
   Padding(
     child: Column(children:[
       TextField(
         controller: txtAngleC,
         keyboardType: TextInputType.number,
         onChanged: (text) {
           double? angle = double.tryParse(text);
           // 增加空值判断，避免解析非数字内容时报错
           if(angle != null && angle >= 0 && angle <= 90) {
             _angleAirplane = angle;
             setState(() {});
           }
         },
       ),
       Text("(type in a value between 0 - 90)")
     ]),
     padding: EdgeInsets.all(15.0),
   ),
   Expanded(
     child: Row(
       children: [
         Padding(
           padding: EdgeInsets.all(20.0),
         ),
         Expanded(
           child: SizedBox(
             height: 250,
             width: 50,
             child: FlutterSlider(
               // 绑定到状态变量_angleAirplane，替代固定的[0]
               values: [_angleAirplane],
               rangeSlider: false,
               max: 90,
               min: 0,
               rtl: true,
               step: FlutterSliderStep(step: 1.0),
               axis: Axis.vertical,
               tooltip: FlutterSliderTooltip(
                 textStyle: TextStyle(fontSize: 14, color: Colors.lightBlue),
               ),
               onDragging: (handlerIndex, lowerValue, upperValue) {
                 _angleAirplane = lowerValue;
                 txtAngleC.text = _angleAirplane.toString();
                 setState(() { });
               }, 
             )
           )
         ),
         Text(_angleAirplane.toString()),
         Padding(
           padding: EdgeInsets.all(10.0),
         ),
         Expanded(
           child: CustomPaint(
             foregroundPainter: AnglePainter(
               angle: _angleAirplane
             )
           )
         )
       ]
     )
   ),
 ]
),

额外优化建议 #

• 在TextField的onChanged里用double.tryParse代替double.parse，避免用户输入非数字内容时抛出异常；
• 确保_angleAirplane在State类中被正确初始化（比如double _angleAirplane = 0.0;）。

内容的提问来源于stack exchange，提问作者Mike Noon