如何将UpdateWidget转为独立Stateful Widget并实现参数传递与状态更新

父组件代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('父子组件状态同步示例')),
        body: const ParentWidget(),
      ),
    );
  }
}

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

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String displayText = '';
  String switchText = '';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 触发displayText更新的按钮组
          Row(
            children: [
              ElevatedButton(
                onPressed: () => setState(() => displayText = '水果'),
                child: const Text('选择水果'),
              ),
              const SizedBox(width: 10),
              ElevatedButton(
                onPressed: () => setState(() => displayText = '蔬菜'),
                child: const Text('选择蔬菜'),
              ),
            ],
          ),
          const SizedBox(height: 20),
          // 展示最终选择结果
          Text('已选择：$switchText', style: const TextStyle(fontSize: 16)),
          const SizedBox(height: 20),
          // 引入独立子组件，传递参数和回调
          ChildButtonWidget(
            displayText: displayText,
            onSelect: (value) => setState(() => switchText = value),
          ),
        ],
      ),
    );
  }
}

独立子组件代码（原updateWidget改造） #

class ChildButtonWidget extends StatefulWidget {
  // 接收父组件传入的displayText，用于判断渲染内容
  final String displayText;
  // 定义回调函数，用于将子组件的选择结果传递给父组件
  final ValueChanged<String> onSelect;

  const ChildButtonWidget({
    super.key,
    required this.displayText,
    required this.onSelect,
  });

  @override
  State<ChildButtonWidget> createState() => _ChildButtonWidgetState();
}

class _ChildButtonWidgetState extends State<ChildButtonWidget> {
  @override
  Widget build(BuildContext context) {
    switch (widget.displayText) {
      case '水果':
        return Row(
          children: [
            ElevatedButton(
              onPressed: () => widget.onSelect('苹果'),
              child: const Text('苹果'),
            ),
            const SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => widget.onSelect('香蕉'),
              child: const Text('香蕉'),
            ),
          ],
        );
      case '蔬菜':
        return Row(
          children: [
            ElevatedButton(
              onPressed: () => widget.onSelect('白菜'),
              child: const Text('白菜'),
            ),
            const SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => widget.onSelect('萝卜'),
              child: const Text('萝卜'),
            ),
          ],
        );
      default:
        return const Text('请先选择分类');
    }
  }
}

核心逻辑说明 #

• 子组件ChildButtonWidget通过构造函数接收两个关键参数：displayText用于判断要渲染的子按钮组，onSelect是回调函数，负责将子按钮的选择结果传递给父组件。
• 父组件在初始化子组件时，传入onSelect回调，在回调内部调用setState更新自身的switchText状态，从而实现子组件驱动父组件状态更新的效果。
• 子组件内部通过widget.displayText获取父组件传入的参数，通过switch/case渲染对应按钮组，点击按钮时调用widget.onSelect传递选中的文本内容。

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