Question

例如，我在 first.dart 文件中有一个小部件，在 second.dart 文件中有另一个小部件。第一个小部件是一个简单的按钮，第二个小部件包括一个带有红色的容器。当我点击按钮时，如何更改该容器的颜色？

如果两个小部件都在一个文件中，那当然很简单，只需调用setState（）方法即可。但是正如我所说，每个小部件都在单独的文件中。

我尝试了什么？老实说，没什么。我不确定这是否可能。我的第一个想法是使用类似ValueListenable之类的方法，但结果并不是很好。

Answer 1

首先，您需要使用无状态小部件创建一个新的dart文件，并将其设置为使用final _color和ColoredContainer(this._color)接收参数，如下所示：

import 'package:flutter/material.dart';

class ColoredContainer extends StatelessWidget {

  final _color;
  ColoredContainer(this._color);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: _color,
    );
  }
}

然后在main.dart文件中，导入dart文件并使用ColoredContainer作为小部件，您可以将Colors传递给它，就我而言，我传递了一个不同的Color每次调用setState时从颜色列表中进行选择：

import 'package:flutter/material.dart';
import 'ColoredContainer.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  final List<Color> _colorList = [
    Colors.red,
    Colors.green,
    Colors.blue,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(onPressed: (){
              setState(() {
                index += 1;
              });
            }, child: Text('Tap me')),
            ColoredContainer(_colorList[index]),
          ],
        ),
      ),
    );
  }
}

从外部文件更新小部件

1 个答案: