Flutter中点击独立Stateful卡片组件如何将数据填入文本框

核心逻辑是通过子组件暴露回调方法的方式，把卡片点击事件携带的数据传递给父页面，父页面拿到数据后直接赋值给文本输入框的控制器即可，不需要依赖第三方状态管理包，符合Flutter原生设计规范。

步骤1：修改卡片子组件LoadData #

给LoadData新增回调参数，点击卡片时将当前卡片数据通过回调抛出：

class LoadData extends StatefulWidget {
  // 新增回调参数，点击卡片时返回当前卡片的数据源
  final Function(Map<String, dynamic> selectedCakeData) onCardTap;
  const LoadData({Key? key, required this.onCardTap}) : super(key: key);

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

class _LoadDataState extends State<LoadData> {
  // 保留你原有的data数据源赋值逻辑即可
  Map<String, dynamic> data = {};

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        // 嵌套ListView建议加这两个属性避免滚动冲突
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        children: [GestureDetector(
          onTap: () {
            // 点击时调用父组件传入的回调，把当前卡片数据传出去
            widget.onCardTap(data);
          },
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12)),
            child: Container(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: <Widget>[
                  Text(
                    data['cupcake_name'],
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    data['description'],
                    style: const TextStyle(
                      fontSize: 20,
                    ),
                  ),
                ],
              ),
            ),
          ),
        )].toList(),
      ),
    );
  }
}

步骤2：修改主页面调用逻辑 #

在主页面实例化LoadData的时候实现回调方法，拿到数据后直接给文本框的controller赋值：

Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      shrinkWrap: true,
      children: <Widget>[
        Form(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextFormField(
              decoration: const InputDecoration(
                labelText: "CupCake Name",
              ),
              controller: cupCake,
              onChanged: (cupcake) {
                cupcakeName = cupcake;
              },
            ),
          ),
        ),
        // 传入回调实现赋值逻辑
        LoadData(
          onCardTap: (selectedCakeData) {
            // 把卡片里的蛋糕名赋值给文本框控制器
            cupCake.text = selectedCakeData['cupcake_name'];
            // 如果还有其他输入框需要填充，比如描述输入框，在这里同理赋值即可
            // descriptionController.text = selectedCakeData['description'];
          },
        ),
      ]
    ),
  );
}

补充说明 #

如果有多个卡片需要渲染，只需要在LoadData里循环数据源生成卡片即可，每个卡片点击都会返回对应位置的独立数据源。

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