Flutter 从另一个页面更改 State 的小部件

Question

我的问题简而言之：我将尝试从另一个小部件更改一个小部件的 state。

长：

• 我有一个页面。

• 此页面显示了一个彩色容器

• 从另一页来看，这个彩色容器应该改变它的颜色

我将不胜感激任何帮助

  import 'package:flutter/material.dart';
  
  class Display extends StatefulWidget {
    Display({Key? key, required this.color}) : super(key: key);
  
    Color color;
  
    @override
    State<StatefulWidget> createState() => DisplayState();
  }
  
  class DisplayState extends State<Display> {
    @override
    Widget build(BuildContext context) {
      return Container(
        color: widget.color,
      );
    }
  
    changeColor(Color color) {
      setState(() {
        widget.color = color;
      });
    }
  }

Answer 1

我不知道我是否理解正确你想要什么，但如果我是对的你可以这样做：

• 创建一个 Color 类型的变量；
• 制作一个 function 改变这个变量的 state (setState);
• 将此 function 作为参数传递给您想要更改颜色的小部件。
• 在您的其他页面中拨打 function。

您的第一个屏幕应该有一个变量来保存 Color 值

Color containerColor;

一个 function 改变它的值

void _setContainerColor(Color newColor) {
  setState(() {
    containerColor = newColor;
  });
}

并在容器中使用变量

Container(
  color: containerColor, // your variable state
  child: SomeWidget(),
);

将您的 function 作为参数传递给您的第二页

MyOtherWidget(_setContainerColor);

在您的其他小部件中，您声明一个 Function 类型的变量来接收您的 function：

const MyOtherWidget(this._setContainerColor) extends StatefulWidget {
  final Function _setContainerColor;

  @override
  _MyOtherWidgetState createState() => _MyOtherWidgetState();
}

class _MyOtherWidgetState extends State<_MyOtherWidget> {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text("Change Color"),
      onPressed: () {
        widget._setContainerColor(Colors.red);
      },
    )
  }
}

不要忘记将containerColor用作容器背景颜色的值。