У меня два виджета. Оба являются виджетами с отслеживанием состояния. Я поместил кнопку и дочерний виджет в виджет HomePage. Я хочу изменить переменную счетчика в дочернем виджете из виджета HomePage при нажатии кнопки в виджете HomePage. Я должен использовать для этого метод setState, но я не могу вызвать его извне из дочернего виджета. Как правильно это сделать?

Screenshot

Родитель

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Child(),
          FlatButton(
            onPressed: () {

              //Increase Child widget's counter variable
              
            },
            child: Text("Button In Parent"),
            color: Colors.amber,
          )
        ],
      ),
    );
  }
}

Ребенок

class Child extends StatefulWidget {
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State<Child> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Text In Child: ',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              //Increase this variable from parent
              counter.toString(),
              style: TextStyle(fontSize: 50),
            ),
          ],
        ),
      ),
    );
  }
}


1
Oguzhan Topal 22 Янв 2021 в 02:19

2 ответа

Лучший ответ

Вы можете использовать setState родительского виджета, чтобы перестроить дочерний виджет. Инициализируйте переменную счетчика в родительском виджете, увеличьте ее и вызовите setState.

В onTap вашего FlatButton в родительском виджете

setState(() {
   counter++;
});

Пусть виджет Child принимает это как параметр Child(counts: counter)

class Child extends StatefulWidget {
  final int counts;

  Child({this.counts});
  @override
  _ChildState createState() => _ChildState();
}

И отобразить его в Text в Child

Text(
  widget.counts.toString(),
  style: TextStyle(fontSize: 50),
),

Это один из способов сделать это.

0
Calvin Gonsalves 22 Янв 2021 в 00:45

Вы должны использовать FlatButton и setState в одном классе, иначе вы не сможете получить доступ к переменной класса. Используйте приведенный ниже код и попытайтесь понять логику setState. Хорошего дня.

class Child extends StatefulWidget {
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State<Child> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Text In Child: ',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              //Increase this variable from parent
              counter.toString(),
              style: TextStyle(fontSize: 50),
            ),
          Expanded(
            child:Container(
              color:Colors.white,
              child:FlatButton(
                onPressed(){
                  setState((){
                    counter=counter+1;
                });
              };
            ),
          ),          
        ),         
      ],
    );
  }
}

0
Yağız Kiremitci 22 Янв 2021 в 00:36