求助：NumberPicker组件选中的currentValue未加粗问题

嘿，我来帮你搞定这个NumberPicker选中值没加粗的问题！结合你描述的场景（映射到类的函数中使用），大概率是值的响应式更新或样式配置出了问题，给你梳理几个排查方向和解决方法：

1. 确保currentValue是响应式状态变量 #

NumberPicker的选中样式依赖组件感知值的变化来更新UI，如果你的currentValue只是普通类变量，没有触发组件重建，选中状态的加粗样式就不会生效。

正确示例（StatefulWidget场景） #

如果是在StatefulWidget中使用，一定要用setState更新状态：

class MyPickerPage extends StatefulWidget {
  @override
  _MyPickerPageState createState() => _MyPickerPageState();
}

class _MyPickerPageState extends State<MyPickerPage> {
  // 把currentValue定义为状态变量
  int _selectedValue = 5;

  @override
  Widget build(BuildContext context) {
    return NumberPicker(
      value: _selectedValue,
      minValue: 1,
      maxValue: 10,
      onChanged: (newValue) {
        // 必须用setState触发组件重建
        setState(() {
          _selectedValue = newValue;
        });
      },
    );
  }
}

自定义类封装场景 #

如果是把NumberPicker封装到自定义类中，要确保父组件的状态能传递并触发子组件更新：

// 自定义Picker组件
class CustomNumberPicker extends StatelessWidget {
  final int currentValue;
  final Function(int) onValueChanged;

  const CustomNumberPicker({
    Key? key,
    required this.currentValue,
    required this.onValueChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberPicker(
      value: currentValue,
      minValue: 1,
      maxValue: 10,
      onChanged: onValueChanged,
      // 显式指定选中样式（避免被默认样式覆盖）
      selectedTextStyle: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

// 父组件使用
class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  int _selectedVal = 3;

  @override
  Widget build(BuildContext context) {
    return CustomNumberPicker(
      currentValue: _selectedVal,
      onValueChanged: (newVal) {
        setState(() => _selectedVal = newVal);
      },
    );
  }
}

2. 检查是否自定义样式覆盖了加粗效果 #

如果你给NumberPicker设置了itemStyle，默认的选中加粗样式会被覆盖，这时候需要显式配置selectedTextStyle来保留加粗效果：

NumberPicker(
  value: _selectedValue,
  minValue: 1,
  maxValue: 10,
  // 自定义普通项样式
  itemStyle: const TextStyle(fontSize: 16, color: Colors.grey),
  // 显式设置选中项的加粗样式
  selectedTextStyle: const TextStyle(
    fontSize: 16,
    color: Colors.black,
    fontWeight: FontWeight.bold,
  ),
  onChanged: (val) => setState(() => _selectedValue = val),
);

3. 映射生成多个Picker时，确保每个项绑定独立状态 #

如果是通过map或列表生成多个NumberPicker，别让所有Picker共享同一个currentValue，要给每个项分配独立的状态变量：

class MultiPickerPage extends StatefulWidget {
  @override
  _MultiPickerPageState createState() => _MultiPickerPageState();
}

class _MultiPickerPageState extends State<MultiPickerPage> {
  // 用列表保存每个Picker的选中值
  List<int> _selectedValues = [2, 5, 7];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(_selectedValues.length, (index) {
        return NumberPicker(
          value: _selectedValues[index],
          minValue: 1,
          maxValue: 10,
          onChanged: (newVal) {
            setState(() {
              _selectedValues[index] = newVal;
            });
          },
        );
      }),
    );
  }
}

先从这几个方向排查，尤其是状态更新是否触发组件重建和选中样式是否被覆盖这两点，应该就能解决选中值不加粗的问题啦！

内容的提问来源于stack exchange，提问作者Mark Gouveia