Как использовать интерфейс во flutter?

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

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

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


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

Просто убедитесь, что вы вызываете SetState в OnChange ().

anmol.majhail 26.10.2018 07:58

Я пробовал это, но не работал.

Akash Patel 26.10.2018 07:59

Вы можете использовать InheritedWidget, ScopeModel или просто установить GlobalKey <YourWidgetState> для своего виджета, и вы можете получить доступ к их методам

diegoveloper 26.10.2018 08:02

Можете ли вы поделиться своим кодом, что вы сделали, а что не сработало.

anmol.majhail 26.10.2018 08:03

Вы также можете использовать функции обратного вызова.

vipin agrahari 27.10.2018 12:55
4
5
8 094
2

Ответы 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),
    );
  }
}

Я думаю, что вы хотите передать функцию, которую нужно выполнить Что-то вроде этого

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

Разве не об этом говорилось в предыдущем ответе?

Dave Newton 23.05.2020 03:45

Другие вопросы по теме