Flutter：如何实现点击ItemTile将数据传入对应TextFormField？

核心问题修正方向 #

当前代码无法实现需求的关键问题：

• CardWidget 中 TextFormField 未绑定对应索引的控制器，controllers[] 语法错误
• 跳转 AddCard 时未传递当前卡片索引，无法定位要更新的控制器
• ItemTile 未实现点击回调逻辑，无法传递选中的数字

修改后的完整代码 #

1. 首页 CardWidget 组件 #

class CardWidget extends StatefulWidget {
  final String title;
  final Color? color;
  final IconData? icon;
  final int index; // 新增索引参数，标记当前卡片位置
  const CardWidget({
    super.key,
    required this.title,
    this.color,
    this.icon,
    required this.index,
  });

  @override
  State<CardWidget> createState() => _CardWidgetState();
}

// 全局控制器列表，维持原逻辑
final controllers = List.generate(12, (index) => TextEditingController());

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      width: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          color: widget.color,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(
                widget.icon,
                color: Colors.white,
                size: 32,
              ),
              Center(child: Text(widget.title)),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30),
                child: TextFormField(
                  controller: controllers[widget.index], // 绑定对应索引的控制器
                  onTap: () async {
                    // 跳转并接收返回的选中数字
                    final selectedNumber = await Navigator.push<int>(
                      context,
                      MaterialPageRoute(builder: (context) => AddCard()),
                    );
                    if (selectedNumber != null) {
                      controllers[widget.index].text = selectedNumber.toString();
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

2. 跳转页面 AddCard #

class AddCard extends StatelessWidget {
  const AddCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        padding: const EdgeInsets.all(50),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 补充网格列数，优化布局
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemCount: 12,
        itemBuilder: (context, index) => ItemTile(
          cardNo: index,
          onTap: () {
            // 点击后返回选中的数字（index+1对应显示的1-12）
            Navigator.pop(context, index + 1);
          },
        ),
      ),
    );
  }
}

3. 网格元素 ItemTile #

class ItemTile extends StatelessWidget {
  final int cardNo;
  final VoidCallback onTap; // 点击回调

  const ItemTile(
    this.cardNo, {
    super.key,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: onTap, // 绑定点击事件
      title: Center(
        child: Text(
          'Tuş ${cardNo + 1}',
          key: Key('text_$cardNo'),
        ),
      ),
    );
  }
}

关键修改说明 #

1. CardWidget 新增索引参数：每个卡片携带自身索引，确保绑定正确的控制器；通过await Navigator.push接收跳转页面返回的数字，直接更新对应控制器
2. AddCard 完善网格布局：补充crossAxisCount等参数让网格正常显示；ItemTile点击时通过Navigator.pop返回选中的数字
3. ItemTile 简化回调逻辑：通过onTap回调传递点击事件，直接返回选中的数字值

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