Как я могу использовать интерфейс во флаттере?

Question

У меня есть два виджета, widget1 и widget2. Widget1: я добавил один раскрывающийся список в этом виджете. теперь я хочу обновить свойства представлений widget2 (например, цвет и имя) при событии изменения элемента в раскрывающемся списке.

Итак, могу ли я использовать интерфейс для выполнения вышеуказанных требований? или есть ли другой способ выполнить то же самое?

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


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

Answer 1

Я думаю, что вы хотите сделать, это передать функцию, которая должна быть выполнена Примерно так:

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...)

Answer 2

Хитрость в том, чтобы иметь общий виджет-предок с состоянием:

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