Flutter Dart：如何为NumberPicker选中文本添加背景色？

方法一：自定义itemBuilder控制绘制层级 #

通过itemBuilder完全自定义每个选项的布局，确保文字在背景之上绘制，从根源解决遮挡问题：

NumberPicker(
  value: restDisplayedSec,
  minValue: 0,
  maxValue: 59,
  step: 1,
  itemHeight: 30,
  onChanged: (value) => setState(() {
    restDisplayedSec = value;
    secLengthRest = restDisplayedSec + restDisplayedMin * 60;
  }),
  itemBuilder: (context, index) {
    final isSelected = index == restDisplayedSec;
    return Container(
      alignment: Alignment.center,
      // 选中时设置背景色
      color: isSelected ? Colors.yellow : Colors.transparent,
      child: Text(
        '$index',
        style: isSelected 
            ? const TextStyle(fontSize: 22, color: Colors.black) 
            : const TextStyle(fontSize: 13, color: Colors.grey),
      ),
    );
  },
)

这种方式直接控制每个选项的容器和文字顺序，背景先绘制，文字在上方，不会出现遮挡。

方法二：使用selectedItemDecoration属性（需对应包版本支持） #

如果你的flutter_numberpicker包版本较新，支持selectedItemDecoration属性，可直接通过该属性设置选中项背景，组件内部会自动处理层级：

NumberPicker(
  value: restDisplayedSec,
  minValue: 0,
  maxValue: 59,
  step: 1,
  itemHeight: 30,
  selectedTextStyle: const TextStyle(fontSize: 22, color: Colors.black),
  textStyle: const TextStyle(fontSize: 13, color: Colors.grey),
  // 设置选中项的背景装饰
  selectedItemDecoration: BoxDecoration(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(4), // 可选：添加圆角
  ),
  onChanged: (value) => setState(() {
    restDisplayedSec = value;
    secLengthRest = restDisplayedSec + restDisplayedMin * 60;
  }),
)

注意事项 #

• 确保itemHeight值足够容纳背景和文字，避免出现裁剪问题
• 自定义itemBuilder时，要保证index与选中value的对应关系准确
• 若使用旧版包，建议升级至最新版本以获取更丰富的自定义能力

内容的提问来源于stack exchange，提问作者Bappa Chy