Flutter中如何将CupertinoPicker初始值同步到TextFormField？

当前代码的核心问题是：HeightPicker仅在滚动选择变化时触发onSelectedItemChanged回调，初始化阶段没有主动将初始值传递给父组件，导致TextFormField的控制器无法获取初始值。

修改方案 #

1. 在HeightPicker的initState中，初始化选中项后主动调用回调传递初始值
2. 新增外部传入初始选中索引的参数，让组件更灵活复用

修改后的代码 #

HeightPicker组件代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HeightPicker extends StatefulWidget {
  final ValueChanged<int> onSelectedItemChanged;
  final int initialSelectedIndex; // 允许外部传入初始选中索引

  const HeightPicker({
    Key? key,
    required this.onSelectedItemChanged,
    this.initialSelectedIndex = 20, // 默认初始索引对应170cm
  }) : super(key: key);

  @override
  _HeightPickerState createState() => _HeightPickerState();
}

class _HeightPickerState extends State<HeightPicker> {
  late int _selected;

  @override
  void initState() {
    super.initState();
    _selected = widget.initialSelectedIndex;
    // 初始化时主动通知父组件初始高度值
    widget.onSelectedItemChanged(150 + _selected);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPicker(
      itemExtent: 30,
      diameterRatio: 1,
      scrollController: FixedExtentScrollController(
        initialItem: _selected,
      ),
      children: List<Widget>.generate(45, (index) {
        int value = 150 + index;
        return Text('$value cm');
      }),
      onSelectedItemChanged: (int value) {
        setState(() {
          _selected = value;
          widget.onSelectedItemChanged(150 + value);
        });
      },
    );
  }
}

父组件调用示例

// 父组件中初始化控制器
final TextEditingController _heightController = TextEditingController();

// 使用HeightPicker
Container(
  child: HeightPicker(
    // 可选：自定义初始索引，比如10对应160cm
    // initialSelectedIndex: 10,
    onSelectedItemChanged: (selectedHeight) {
      _heightController.text = selectedHeight.toString();
    },
  ),
)

修改后，HeightPicker初始化时会立即将初始高度值传递给父组件的回调，TextFormField的控制器就能同步拿到初始值，滚动选择时也能正常更新。

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