Question

我正在使用flutter构建食品购物车应用。但是，当在Listtile的末尾递增或递减时，我无法显示计数器值。

每当将新商品添加到购物车时，计数器都会增加，但应用程序不会显示当前计数器值。

这是下面的代码。我已在面临问题的地方发表了评论。谢谢。

import 'package:flutter/material.dart';
import 'package:ifhe_canteen/StudentCart.dart';
class StudentHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );//MaterialApp
  }
}
class HomePage extends StatefulWidget{
  @override
  HomePage1 createState() => new HomePage1();
  }
class HomePage1 extends State<HomePage>{
  int selectedPage=0;
  final pageOptions=[
    Text('Messages'),
    Text('Cart'),
    Text('Profile'),

  ];
  @override
  Widget build(BuildContext context) {
    var Listview=ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.fastfood),
        )
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Categories'),
      ),
      body:new Container(
        child: new ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return new StuffInTiles(listOfTiles[index]);
          },
          itemCount: listOfTiles.length,
        ),
      ),//body: pageOptions[selectedPage],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedPage,
        onTap: (int index){
          setState(() {
            selectedPage=index;
          });
        },// this will be set when a newx  tab is tapped
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.shopping_basket),
            title: new Text('Cart'),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}
class StuffInTiles extends StatelessWidget {
  final MyTile myTile;
  StuffInTiles(this.myTile);
  int _itemCount;
  String item;
  void _removeproduct(){
    _itemCount--;
    print(_itemCount);
  }
  int _addproduct(){
    _itemCount++;
    print(_itemCount);
    item=_itemCount.toString();
    print(item);
    return _itemCount;
  }
  @override
  Widget build(BuildContext context) {
    return _buildTiles(myTile);
  }

  Widget _buildTiles  (MyTile t) {
    if (t.children.isEmpty)
      {
        return new ListTile(
          dense: true,
          enabled: true,
          isThreeLine: false,
          title: new Text(t.title),
          trailing:new Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new  IconButton(icon: new Icon(Icons.remove),onPressed:()=>_removeproduct()),
              new Text(_itemCount.toString()),//here, the incremented value  is not displayed
              new IconButton(icon: new Icon(Icons.add),onPressed:()=>_addproduct()),//here the function is called
            ],
          ),
          onTap:()=>print("here cart value will be incremented"),
        );
      }
    return new ExpansionTile(
      key: new PageStorageKey<MyTile>(t),
      title: new Text(t.title),
      children: t.children.map(_buildTiles).toList(),
    );
  }
}

class MyTile {
  String title;
  List<MyTile> children;
  MyTile(this.title, [this.children = const <MyTile>[]]);
}

List<MyTile> listOfTiles = <MyTile>[
  new MyTile(
    'Mess 1',
    <MyTile>[
      new MyTile(
        'Maggie',
        <MyTile>[
          new MyTile('Veg Cheese Maggie'),
          new MyTile('Plain Maggie'),
          new MyTile('Chicken Maggie'),
        ],
      ),//Maggie
      new MyTile(
          'Paratha',
          <MyTile>[
            new MyTile('Veg Paratha'),
            new MyTile('Veg Butter Paratha'),
            new MyTile('Chicken Paratha'),
            new MyTile('Chicken Butter Paratha'),
          ],
      ),//Paratha
    ],
  ),
  new MyTile(
    'Mess 2',
    <MyTile>[
      new MyTile(
        'Maggie',
        <MyTile>[
          new MyTile('Veg Cheese Maggie'),
          new MyTile('Plain Maggie'),
          new MyTile('Chicken Maggie'),
        ],
      ),//Maggie
      new MyTile(
        'Paratha',
        <MyTile>[
          new MyTile('Veg Paratha'),
          new MyTile('Veg Butter Paratha'),
          new MyTile('Chicken Paratha'),
          new MyTile('Chicken Butter Paratha'),
        ],
      ),//Paratha
    ],
  ),
];

Answer 1

每当您更新代码中的变量时，都需要调用setState，并希望看到更改反映在屏幕上。请注意，它仅在StatefulWidgets中起作用，这意味着，如果需要，您将需要一个StatefulWidget（就像您已经做的那样）。 setState方法将刷新屏幕，并且查看的值将更改。

编辑您的_addproduct和_removeproduct函数，使其在_itemCounter变量上具有setState：

void _removeproduct(){
  setState((){
    _itemCount--;
  });
}
int _addproduct(){
  setState((){
    _itemCount++;
  });
}

我建议您read some articles了解如何在Flutter中使用状态。最好的祝福。

新的Text（counter.toString（））显示不会随着计数器的增加而更新

1 个答案: