Я недавно начал изучать флаттер и поэтому создаю приложение didacti c, которое я называю «Basketly».
пользовательский интерфейс структура довольно проста:
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Basketly - dein Einkauf'),
actions: <Widget>[
new FlatButton.icon(
label: new Text("Einstellungen"),
onPressed: () {
/*nav to settings */
Navigator.push(context,
MaterialPageRoute(builder: (context) => SettingsView()));
},
icon: new Icon(Icons.settings),
),
],
),
body: new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text(
"Einkaufswagen",
style: new TextStyle(
fontSize: 12.0,
color: Colors.amber,
fontWeight: FontWeight.w600,
fontFamily: "Roboto"),
),
Expanded(
child: new GridView.count(
crossAxisCount: 6,
children: this.widget.basketItems,
),
),
new Divider(color: Colors.grey),
new Text(
"Produkte",
style: new TextStyle(
fontSize: 12.0,
color: Colors.amber,
fontWeight: FontWeight.w600,
fontFamily: "Roboto"),
),
new GridView.count(
crossAxisCount: 6,
children: this.widget.allItems,
shrinkWrap: true),
new Divider(color: Colors.grey),
//TODO here we input some expandeable gridviews or something
new MetaProdCategory("Reinigungsmittel"),
new MetaProdCategory("Getränke"),
new MetaProdCategory("Obst"),
new MetaProdCategory("Milch & Käse"),
new MetaProdCategory("Gemüse"),
new Row( children: <Widget>[
new Switch(onChanged: switchChanged, value: false),
new Text("Vegan"),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Bio",
),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Regional",
),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Fair",
),
]),
]));
Моя желаемая функциональность подобна описанной на рисунке: если вы нажмете на одну из иконок (ProdCategory) в «Produkte», она будет удалена из «Produkte» и добавлена в « Einkaufswagen "и наоборот. Это должен сервер как простой список покупок.
Поэтому я реализовал:
List<ProdCategory> basketItems; // the items currently in the basket
List<ProdCategory> allItems; // all Items
..., которые служат структурами данных, хранящими элементы категории ProdCategory.
и обратные вызовы для добавления / удаления их из списков:
// updates the current basket by adding a productCategory to it
// (and removing from allItems)
addToBasket(ProdCategory prod) {
setState(() {
log("addToBasket called");
prod.upOrDown = !prod.upOrDown;
this.widget.basketItems.add(prod);
this.widget.allItems.remove(prod);
});
.. включая некоторые журналы, чтобы убедиться, что все работает как положено:
log("---------basketItems:");
this.widget.basketItems.forEach((element) {
log(element.stringify());
});
log("----------allItems:");
this.widget.allItems.forEach((element) {
log(element.stringify());
});
теперь к проблеме!
когда я На вкладке одна из категорий ProdCategories (в данном случае Brot), согласно журналу, все работает как положено:
[log] you tapped on Brot
[log] addToBasket called
[log] ---------basketItems:
[log] Brot true
[log] ----------allItems:
[log] Bier false
[log] Senf false
[log] Lauch false
[log] Steak false
[log] Bergkäse false
[log] Mehl false
[log] Kürbis false
[log] Oliven false
[log] Pfeffer false
, как вы можете видеть, теперь Brot находится в basketItems и удален из allItems - как и ожидалось.
... Но каким-то образом пользовательский интерфейс не показывает Brot в Einkaufswagen GridView.
Понятия не имею, что Я делаю неправильно и работаю над этой проблемой, так как несколько часов безуспешно. Кажется, в Flutter довольно много ошибок вокруг GridView, особенно при использовании в Column - но я подозреваю, что должно быть правильное решение для удобства использования, которое мне требуется?
Вот весь источник.