如何在颤振中同时更改两个变量？

Question

目标：

我正在尝试创建具有减少或增加计数器的项目清单，同时以最终价格显示总计。

问题：

问题在于两个变量不能同时更改，因为它们是setState，而且我不知道如何异步执行。

我也不知道如何将此类转换为可被称为normal的小部件以构建列表。

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

将状态保留在上部小部件中并将其传递到树上，以便子小部件始终可以正确地重绘它。

您需要的是项目中的StateManagement设置。阅读this文章以了解更多详细信息。

Answer 2

正如Darish所说，拥有状态的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,
            )
          ],
        ),
      ],
    );
  }
}