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

【问题标题】：Change state of a widget from another widget从另一个小部件更改小部件的状态
【发布时间】：2021-07-20 19:53:18
【问题描述】：

我最近开始使用 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"),
              ))
        ],
      ),
    );
  }
}

在上面的代码中，我创建了一个初始颜色为黑色的框，并使用位于同一类 MyHomePage 中的手势检测器对其进行更改。如何在不同的 dart 文件中使用不同的类来做同样的事情。

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"),
        ));
  }
}

【问题讨论】：

标签： flutter dart flutter-widget

【解决方案1】：

您可以使用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;
           });
          })
        ],
      ),
    );
  }
}

告诉我它是否有效。

【讨论】：