Flutter中如何让多层级子Widget的onTap更新顶层String变量

核心思路是让主页面（StatefulWidget）将更新文本的回调函数传递给无状态的Choices组件，Choices仅负责在按钮点击时把选中的选项（A/B）作为参数触发回调，由主页面自己更新状态并刷新UI。以下是具体实现：

1. 主页面（StatefulWidget） #

负责维护textToDisplay的状态，并提供更新该状态的回调：

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

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  String textToDisplay = '初始文本';

  // 定义更新文本的回调函数
  void _updateDisplayText(String selectedOption) {
    setState(() {
      textToDisplay = selectedOption == 'A' ? '你选择了选项A' : '你选择了选项B';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页面')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(textToDisplay, style: const TextStyle(fontSize: 20)),
          const SizedBox(height: 30),
          // 将回调传递给Choices组件
          Choices(onOptionTap: _updateDisplayText),
        ],
      ),
    );
  }
}

2. Choices组件（StatelessWidget） #

仅接收回调并在按钮点击时触发，不管理任何状态：

import 'package:flutter/material.dart';

class Choices extends StatelessWidget {
  // 接收带字符串参数的回调函数
  final Function(String) onOptionTap;

  const Choices({super.key, required this.onOptionTap});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: () => onOptionTap('A'), // 点击A时传递参数'A'
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            color: Colors.blue,
            child: const Text('Option A', style: TextStyle(color: Colors.white)),
          ),
        ),
        const SizedBox(width: 20),
        GestureDetector(
          onTap: () => onOptionTap('B'), // 点击B时传递参数'B'
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            color: Colors.green,
            child: const Text('Option B', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    );
  }
}

优化建议（可选） #

如果选项较多或需要类型安全，可以用枚举代替字符串：

// 定义枚举
enum SelectOption { a, b }

// 主页面回调修改为
void _updateDisplayText(SelectOption option) {
  setState(() {
    switch (option) {
      case SelectOption.a:
        textToDisplay = '你选择了选项A';
        break;
      case SelectOption.b:
        textToDisplay = '你选择了选项B';
        break;
    }
  });
}

// Choices组件的参数和触发逻辑修改为
final Function(SelectOption) onOptionTap;
// ...
onTap: () => onOptionTap(SelectOption.a),
onTap: () => onOptionTap(SelectOption.b),

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