Flutter跨类调用setState/Callback实现双栏交互问题

拆分组件后要实现跨组件更新，核心思路是状态提升——把需要共享的状态放在所有相关组件的共同父组件（这里是HomePage）里，子组件通过回调触发父组件的状态更新，再把最新状态传递给需要展示的子组件。

按以下步骤修改你的代码：

1. 改造ColonnaDx，接收外部传入的文本 #

让ColonnaDx不再自行维护状态，转而接收父组件传入的文本并展示：

class ColonnaDx extends StatelessWidget {
  final String displayText;
  const ColonnaDx({super.key, required this.displayText});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Container(
        decoration: const BoxDecoration(color: Colors.blue),
        child: Column(
          children: [
            Expanded(
              child: Center(
                // 显示父组件传入的文本
                child: Text(displayText),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 给ColonnaSx添加回调参数 #

让ColonnaSx接收父组件传来的回调，并传递给内部的BottoneA：

class ColonnaSx extends StatelessWidget {
  final VoidCallback onButtonPressed;
  const ColonnaSx({super.key, required this.onButtonPressed});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        decoration: const BoxDecoration(color: Colors.red),
        child: Column(
          children: [
            Expanded(
              child: Center(
                // 把回调传递给按钮组件
                child: BottoneA(callbackFunction: onButtonPressed),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 完善BottoneA的回调逻辑 #

让BottoneA接收回调参数，点击时触发该回调：

class BottoneA extends StatelessWidget {
  final VoidCallback callbackFunction;
  const BottoneA({super.key, required this.callbackFunction});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(const Color.fromARGB(255, 72, 3, 201)),
      ),
      // 点击按钮时触发传入的回调
      onPressed: callbackFunction,
      child: const Text('Press here'),
    );
  }
}

4. 在HomePage中维护状态并传递给子组件 #

在HomePage里实现状态更新方法，把状态和回调分别传给ColonnaDx和ColonnaSx：

class HomePageState extends State<HomePage> {
  String TestoADestra = 'TestoInizialeADestra';

  // 定义更新右栏文本的方法
  void updateRightText() {
    setState(() {
      TestoADestra = '按钮点击后的新文本';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 把更新方法作为回调传给左栏
          ColonnaSx(onButtonPressed: updateRightText),
          // 把当前状态文本传给右栏
          ColonnaDx(displayText: TestoADestra),
        ],
      ),
    );
  }
}

完整修改后的代码 #

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(
      title: 'Flutter layout demo',
      home: HomePage(),
    );
  }
}

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

class HomePageState extends State<HomePage> {
  String TestoADestra = 'TestoInizialeADestra';

  void updateRightText() {
    setState(() {
      TestoADestra = '按钮点击后的新文本';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          ColonnaSx(onButtonPressed: updateRightText),
          ColonnaDx(displayText: TestoADestra),
        ],
      ),
    );
  }
}

class ColonnaDx extends StatelessWidget {
  final String displayText;
  const ColonnaDx({super.key, required this.displayText});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Container(
        decoration: const BoxDecoration(color: Colors.blue),
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Text(displayText),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ColonnaSx extends StatelessWidget {
  final VoidCallback onButtonPressed;
  const ColonnaSx({super.key, required this.onButtonPressed});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        decoration: const BoxDecoration(color: Colors.red),
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: BottoneA(callbackFunction: onButtonPressed),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BottoneA extends StatelessWidget {
  final VoidCallback callbackFunction;
  const BottoneA({super.key, required this.callbackFunction});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(const Color.fromARGB(255, 72, 3, 201)),
      ),
      onPressed: callbackFunction,
      child: const Text('Press here'),
    );
  }
}

关键说明 #

• 状态提升是Flutter跨组件共享状态的基础方案，避免了组件间直接调用状态方法的耦合问题。
• 如果后续组件层级更复杂，可以考虑使用Provider、Riverpod等状态管理库，但当前场景下状态提升足够简洁高效。

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