如何在 Flutter 中使用接口？答案

【问题标题】：How to use Interface in Flutter?如何在 Flutter 中使用接口？
【发布时间】：2019-03-30 20:00:10
【问题描述】：

我有两个小部件，小部件 1 和小部件 2。 Widget1：我在这个小部件中添加了一个下拉菜单。现在我想在下拉项目更改事件上更新 widget2 的视图属性（如颜色和名称）。

那么，我可以使用接口来满足上述要求吗？或者还有其他方法可以执行相同的操作吗？

Widget1
 - Text
 - DropdownButton
     - OnChange(){
        // Update widget2 (change txt1 & color1 values)
       }


Widget2
 - Text
 - Container
     - Card
         - Text (txt1, color1...)

【问题讨论】：

只要确保你在 OnChange() 中调用了 SetState。
我试过了，但没用。
你可以使用 InheritedWidget、ScopeModel 或者只是为你的小部件设置一个 GlobalKey 并且你可以访问他们的方法
你能分享你的代码你做了什么和什么没用。
你也可以使用回调函数。

标签： flutter flutter-layout

【解决方案1】：

诀窍是拥有一个有状态的共同祖先小部件：

WidgetParent (StatefulWidget)
- Widget1 (displays the dropdown)
- Widget2 (displays the text/color)

Widget1 的选择被向上传递给父级（使用回调）。选择存储在父窗口小部件的状态中，并通过构造函数参数传递给 Widget2。父级调用setState，这会导致所有子级都被重建。

示例代码：

import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String _text = 'hello world';
  Color _color = Colors.red;

  void _onSelectionChanged(int value) {
    if (value == 0) {
      setState(() {
        _text = "0 selected";
        _color = Colors.blue;
      });
    } else if (value == 1) {
      setState(() {
        _text = "1 selected";
        _color = Colors.yellow;
      });
    } else {
      setState(() {
        _text = "unknown value selected";
        _color = Colors.black;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Widget1(
          onChanged: _onSelectionChanged,
        ),
        Widget2(
          text: _text,
          color: _color,
        )
      ],
    );
  }
}

class Widget1 extends StatelessWidget {
  final ValueChanged<int> onChanged;

  const Widget1({Key key, this.onChanged}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DropdownButton<int>(
      items: [
        DropdownMenuItem(child: Text("Zero"), value: 0),
        DropdownMenuItem(child: Text("One"), value: 1),
      ],
      onChanged: onChanged,
    );
  }
}

class Widget2 extends StatelessWidget {
  final String text;
  final Color color;

  const Widget2({Key key, this.text, this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Text(text),
    );
  }
}

【讨论】：

【解决方案2】：

我认为你想要做的是传递需要执行的函数像这样的

Widget1 (this._onChangeFunction); // get a ref to the Function needed later

final Function _onChangeFunction; 

 - Text
 - DropdownButton
     - OnChange(){
        // Update widget2 (change txt1 & color1 values)
        _onChangeFunction(txt, color);
      }


Widget2

fun _changeText(String txt, String color) {
   // called by Widget1, change the Text... in this private function
}

// some reference to Widget1, nested in your Card perhaps?
Widget1(_changeText);

 - Text
 - Container
     - Card
         - Text (txt1, color1...)

【讨论】：

前面的回答不是这么说的吗？