Flutter技术问询：获取父组件文本框值及向子组件传递搜索框值

嘿，针对你遇到的这两个Flutter开发问题，我结合你的代码给你具体的解决方案，都是实际项目里常用的方法：

最常用且可靠的方式是使用TextEditingController，它能帮你轻松控制和获取输入框的内容，步骤如下：

• 在父Widget的State类中定义一个TextEditingController实例
• 将这个控制器绑定到TextFormField的controller属性上
• 之后就能通过controller.text直接获取输入值，还能监听输入内容的实时变化

示例代码：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // 初始化输入控制器
  final TextEditingController _inputController = TextEditingController();

  @override
  void dispose() {
    // *务必在组件销毁时释放控制器，避免内存泄漏*
    _inputController.dispose();
    super.dispose();
  }

  // 获取输入值的方法
  void _fetchInputValue() {
    String inputContent = _inputController.text;
    print("当前输入值：$inputContent");
    // 这里可以做后续逻辑，比如传递给子组件、提交接口等
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(
          controller: _inputController, // 绑定控制器
          decoration: const InputDecoration(hintText: "请输入内容"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _fetchInputValue,
          child: const Text("获取输入值"),
        )
      ],
    );
  }
}

你的场景是切换页面时只更新Scaffold的body，导致子Widget拿不到AppBar里的输入值。核心思路是把输入状态提升到父Widget，然后通过构造函数传递给子Widget，或者用监听的方式让子Widget实时响应输入变化。结合你的代码，我给你两种可行方案：

方案一：通过状态提升+setState实时传递 #

在父Widget中监听AppBar TextField的输入变化，更新状态后传递给子Widget：

修改后的父Widget代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;
  // 定义搜索输入控制器
  final TextEditingController _searchController = TextEditingController();
  String _currentSearchText = "";

  @override
  void initState() {
    super.initState();
    // 监听输入变化，实时更新搜索文本
    _searchController.addListener(() {
      setState(() {
        _currentSearchText = _searchController.text;
      });
    });
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  void _onSelectItem(int index) {
    setState(() {
      _selectedDrawerIndex = index;
    });
    Navigator.of(context).pop(); // 点击抽屉选项后关闭抽屉
  }

  // 根据索引返回对应子Widget，并传递搜索文本
  Widget _getStatefulWidget(int index) {
    switch (index) {
      case 1:
        return PlayerSearchWidget(searchText: _currentSearchText);
      default:
        return const Center(child: Text("首页"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("appTitle"),
        actions: <Widget>[
          SizedBox(
            width: 200,
            child: TextField(
              controller: _searchController, // 绑定控制器
              decoration: const InputDecoration(
                hintText: "搜索...",
                hintStyle: TextStyle(color: Colors.white70),
              ),
              style: const TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
      drawer: Drawer(
        child: Material(
          child: InkWell(
            onTap: () => _onSelectItem(1),
            child: ListTile(
              title: Text(
                "Oyuncu Sorgula",
                style: TextStyle(
                  color: Colors.black,
                  fontFamily: "Montbold",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
          ),
        ),
      ),
      body: _getStatefulWidget(_selectedDrawerIndex),
    );
  }
}

对应的子Widget代码：

// 子Widget通过构造函数接收搜索文本
class PlayerSearchWidget extends StatelessWidget {
  final String searchText;

  const PlayerSearchWidget({Key? key, required this.searchText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      // 实时显示当前搜索内容
      child: Text("当前搜索内容：$searchText"),
    );
  }
}

方案二：直接传递控制器（更高效） #

如果不想每次输入都触发父Widget的setState，可以直接把TextEditingController传递给子Widget，子Widget用ValueListenableBuilder监听控制器的变化，这样只有子Widget会更新，性能更好：

修改子Widget代码：

class PlayerSearchWidget extends StatelessWidget {
  final TextEditingController searchController;

  const PlayerSearchWidget({Key? key, required this.searchController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<TextEditingValue>(
      valueListenable: searchController,
      builder: (context, value, child) {
        return Center(
          child: Text("当前搜索内容：${value.text}"),
        );
      },
    );
  }
}

然后在父Widget的_getStatefulWidget方法中传递控制器：

case 1:
  return PlayerSearchWidget(searchController: _searchController);

这样就实现了AppBar输入内容实时同步到子Widget的效果啦。

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