Как изменить две переменные одновременно в флаттере?

Question

Цель:

Я пытаюсь создать список предметов, счетчик которых уменьшается или увеличивается, и в то же время отображается итоговая цена с окончательной ценой.

Проблема:

Проблема в том, что обе переменные нельзя изменить одновременно, потому что они setState, и я не знаю, как это сделать асинхронно.

Я тоже не знаю как преобразовать этот класс в виджет, который можно назвать нормальным для построения списка.

class FlutterExample extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return new Scaffold(
     body: new ListView(
       children: new List.generate(5, (i)=>new ListTileItem(
         title: "Item#$i",
       )),
     ),
   );
 }

}
class ListTileItem extends StatefulWidget {
final  String title;
 ListTileItem({this.title});
 @override
 _ListTileItemState createState() => new _ListTileItemState();
}

class _ListTileItemState extends State<ListTileItem> {
 int _itemCount = 0;
 @override
 Widget build(BuildContext context) {
   return new Container(

     child: new Row(
       children: <Widget>[
          IconButton(icon: new Icon(Icons.remove),onPressed: ()=>setState(()=>_itemCount--),),
           new Text(_itemCount.toString()),
           new IconButton(icon: new Icon(Icons.add),onPressed: ()=>setState(()=>_itemCount++))
       ],
     ),
   );
 }
}

Answer 1

Как говорит Дари sh, Widget, который удерживает состояние, должен быть Родителем, в данном случае Flutter Example. Он должен обеспечить ListTileItem функциями, которые изменяют состояние переменных.

Я быстро изменил ваш код. Вы можете попробовать его на DartPad

Фрагмент:

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  int total = 0;
  List<int> individualCount = [];
  List<String> individualTitle = [];

  @override
  void initState() {
    List.generate(5, (i) {
      individualCount.add(0);
      individualTitle.add('item ${i + 1}');
    });
    super.initState();
  }

  void increment(int index) {
    setState(() {
      individualCount[index]++;
      total++;
    });
  }

  void decrement(int index) {
    setState(() {
      individualCount[index]--;
      total--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 120,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Text('total: $total', style: TextStyle(fontSize: 24)),
          SizedBox(height: 24),
          Expanded(
            child: ListView.builder(
              itemCount: individualCount.length,
              itemBuilder: (context, index) {
                return ListTileItem(
                  title: individualTitle[index],
                  count: individualCount[index],
                  decrement: () => decrement(index),
                  increment: () => increment(index),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class ListTileItem extends StatelessWidget {
  final String title;
  final int count;
  final Function decrement;
  final Function increment;

  ListTileItem({this.title, this.count, this.decrement, this.increment});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$title'),
        Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.remove),
              onPressed: decrement,
            ),
            Text('$count'),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: increment,
            )
          ],
        ),
      ],
    );
  }
}

Answer 2

Сохраните состояние в верхнем виджете и передайте его вниз по дереву, чтобы дочерний виджет всегда мог правильно его перерисовать.

Что вам нужно, так это настройка StateManagement в вашем проекте. Прочитайте эту статью для более подробной информации.