Question

我当前正在创建一个简单的杂货清单应用程序，供自己使用Flutter使用。基本上，用户（我自己）将能够在购物前将杂货项目添加到列表中，并且当他们抓住每个项目时，将有一个将其从列表中选中的选项，并且在点击列表图块时，他们将具有能够编辑每个项目的价格。总费用加起来并显示在底部。这样做的目的是出于预算目的，因为我一向遇到抓取太多东西并在结帐时感到惊讶的问题。

我正在尝试添加编辑功能，但我不太了解如何进行编辑。我有一个I.需要访问的对象列表，B。在底部的模式表上显示所选对象，C。可以在保存更新的项目之前更新值。

我试图编写一种将当前值设置为等于所选对象的方法：

    final updatedItem = ItemModel(
      amount: _userItems[index].amount,
      groceryItem: _userItems[index].groceryItem,
      isEditing: true,
    );
    setState(() {
      _userItems[index] = updatedItem;
    });
    print(updatedItem);
  }

我已经可以访问选定的对象，但是我不太确定从这里到哪里。继续前进，我需要底部的模式表来打开备份并显示所选对象的值并相应地编辑这些值。我在想我需要编写一个单独的方法来实际更新值？这是我的代码：

购物清单小部件：

import 'package:shopping_list_project/components/new_item.dart';
import 'package:shopping_list_project/models/item_model.dart';

class ShoppingListView extends StatefulWidget {
  @override
  _ShoppingListViewState createState() => _ShoppingListViewState();
}

class _ShoppingListViewState extends State<ShoppingListView> {
  static List<ItemModel> _userItems = [];
  static var sum = 0.0;

  //Method to add new item
  void _addNewItem(String item, double itemAmount) {
    final newItem = ItemModel(
      amount: itemAmount,
      groceryItem: item,
    );

    setState(() {
      _userItems.add(newItem);
    });
    _addTotalCost();
  }

  //Initiate bottom modal sheet
  void _startAddNewItem(BuildContext ctx) {
    showModalBottomSheet(
      context: ctx,
      builder: (_) {
        return GestureDetector(
          child: NewItem(_addNewItem),
        );
      },
    );
  }

  // Method to add total
  void _addTotalCost() {
    double tempSum = 0.0;
    for (var i = 0; i < _userItems.length; i++) {
      tempSum += _userItems[i].amount;
    }
    setState(() {
      sum = tempSum;
    });
  }

  void _handleEdit(int index) {
    final updatedItem = ItemModel(
      amount: _userItems[index].amount,
      groceryItem: _userItems[index].groceryItem,
      isEditing: true,
    );
    setState(() {
      _userItems[index] = updatedItem;
    });
    print(updatedItem);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping list'),
      ),
      body: _userItems.length == 0
          ? Center(
              child: Container(
                child: Text(
                  'No items added yet!',
                  style: TextStyle(fontSize: 25.0),
                ),
              ),
            )
          : Column(
              children: <Widget>[
                Expanded(
                  child: _buildItemTile(),
                ),
                _buildTotalCard(),
              ],
            ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _startAddNewItem(context);
        },
      ),
    );
  }

  ListView _buildItemTile() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            _handleEdit(index);
          },
          child: Container(
            padding: EdgeInsets.all(3.0),
            child: Card(
              child: ListTile(
                leading: Checkbox(
                  value: _userItems[index].isSelected,
                  onChanged: (bool val) {
                    setState(() {
                      _userItems[index].isSelected = val;
                    });
                  },
                ),
                title: Center(
                  child: Text(_userItems[index].groceryItem),
                ),
                trailing:
                    Text('\$${_userItems[index].amount.toStringAsFixed(2)}'),
              ),
            ),
          ),
        );
      },
      itemCount: _userItems.length,
    );
  }

  Row _buildTotalCard() {
    return Row(
      children: <Widget>[
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.grey[300],
            ),
            padding: EdgeInsets.all(50.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    'Total',
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(5.0),
                  child: Text(
                    '\$${sum.toStringAsFixed(2)}',
                    style: TextStyle(fontSize: 35.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

新商品小部件：

import 'package:shopping_list_project/models/item_model.dart';

class NewItem extends StatefulWidget {
  final Function addNewItm;

  NewItem(this.addNewItm);

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

class _NewItemState extends State<NewItem> {
  TextEditingController itemController = TextEditingController();
  TextEditingController amtController = TextEditingController();

  void submitData() {
    String enteredItem = itemController.text;
    double enteredAmount = double.tryParse(amtController.text) ?? 0.0;

    if (enteredItem.isEmpty) {
      return;
    }

    widget.addNewItm(
      enteredItem,
      enteredAmount,
    );

    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Container(
        padding: EdgeInsets.all(35.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: itemController,
              decoration: InputDecoration(labelText: 'Item'),
              onSubmitted: (_) => submitData(),
            ),
            TextField(
              controller: amtController,
              decoration: InputDecoration(labelText: 'Amount'),
              onSubmitted: (_) => submitData(),
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: RaisedButton(
                padding: EdgeInsets.all(15.0),
                child: Text('Add item'),
                onPressed: submitData,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

项目模型：

import 'package:flutter/material.dart';

class ItemModel {
  final String groceryItem;
  final double amount;
  bool isSelected = false;
  bool isEditing = false;

  ItemModel({this.groceryItem, this.amount, this.isSelected = false, this.isEditing});

  String toString() => '''

  groceryItem: $groceryItem,
  amount: $amount,
  isSelected: $isSelected,
  isEditing: $isEditing,

  ''';
}

Answer 1

您可能正在寻找状态管理来解决这个问题。这有助于从应用程序的任何位置管理数据。有了这个，您应该可以轻松地在底部模式表上显示更新的数据。我建议查看此 guide 以了解更多详情。

编辑对象列表颤动的值（更新状态）

1 个答案: