从另一个小部件更改一个小部件的状态

Change state of a widget from another widget

我最近开始使用 flutter web。从另一个文件(例如:test.dart)

更改一个文件(例如:Home.dart)中的小部件状态的最佳做法是什么
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color colo = Colors.black;

  testA() {
    setState(() {
      colo = Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            color: colo,
          ),
          GestureDetector(
              onTap: () {
                testA();
              },
              child: Container(
                child: Text("test"),
              ))
        ],
      ),
    );
  }
}

在上面的代码中,我创建了一个初始颜色为黑色的框,并使用同一 class MyHomePage 中的手势检测器对其进行了更改。我怎样才能在不同的飞镖文件中使用不同的 class 来做同样的事情。

HomePage.dart

import 'package:flutter/material.dart';
import 'package:testweb/test.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color colo = Colors.black;

  testA() {
    setState(() {
      colo = Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            color: colo,
          ),
          TestB()
        ],
      ),
    );
  }
}

testB.dart

import 'package:flutter/material.dart';

class TestB extends StatefulWidget {
  @override
  _TestBState createState() => _TestBState();
}

class _TestBState extends State<TestB> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          testA();
        },
        child: Container(
          child: Text("test"),
        ));
  }
}

您可以使用TestB onTap中的Function来设置HomePage容器的颜色。

TestB.dart

import 'package:flutter/material.dart';

class TestB extends StatefulWidget {
 Function colorChange;
 TestB({this.colorChange});
  @override
  _TestBState createState() => _TestBState();
}

class _TestBState extends State<TestB> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          widget.colorChange(Colors.blue);
        },
        child: Container(
          child: Text("test"),
        ));
  }
}

Home.dart

import 'package:flutter/material.dart';
import 'package:testweb/test.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color colo = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            color: colo,
          ),
          TestB(colorChange: (color){
           setState(() {
            colo = color;
           });
          })
        ],
      ),
    );
  }
}

告诉我它是否有效。