在 Flutter 中更新列表视图的子标题而不刷新

Question

在开始时，我从填充 ListView 的数据库中加载数据。这些数据显示在 ListView 的标题和副标题上。当用户点击列表中的一个项目时，会弹出一个showModalBottomSheet，其中包含用于更新列表（索引）的字段。此更新已成功执行，但在showModalBottomSheet 关闭时，每个 ListView 项上的值都会刷新为默认值（来自数据库的数据）。

请问，如何在 ListView 不刷新到初始数据值的情况下更新 ListView 项目？

 Widget _buildSubjects(BuildContext context, int index) {

  response = getFieldData(_snapshot!.data[index]);

return ListTile(
  trailing: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {
      showModalBottomSheet(
        isScrollControlled: true,
        context: context,
        builder: (context) {
          return SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Text(
                      _snapshot!.data[index]['name']
                          .toString()
                          .toUpperCase(),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Form(
                    key: _scoreForm,
                    child: Column(
                      children: [
                        scoreFields(_snapshot!.data[index]),
                        SizedBox(
                          height: 10.0,
                        ),
                        ElevatedButton(
                          onPressed: () {
                            if (!_scoreForm.currentState!.validate())
                              return;
                            _scoreForm.currentState!.save();

                             setState(() {
                                    response = "New Value";
                              });
                            
                            //close bottomsheet
                            Navigator.pop(context);
                          },
                          child: Text("Save Score"),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      );
    },
  ),
  title: Text(
    _snapshot!.data[index]['name'].toString().toUpperCase(),
    style: TextStyle(
      fontWeight: FontWeight.w400,
    ),
  ),
  subtitle: Text(
    response,
  ),
  onTap: () {},
);
}

Answer 1

您可以使用 ValueListenableBuilder 包装您的 ListTile，如下所示：

ValueNotifier<bool> newData = ValueNotifier(false);

 ValueListenableBuilder<bool>(
          valueListenable: newData,
          builder: (context, value, child) {
            return ListTile(
  trailing: IconButton(
    icon: Icon(Icons.add), //... rest of your code

而不是调用

setState(() {
        response = "New Value";
});

在没有 setState 的情况下调用下面

response = "New Value";
newData.value = !newData.value;

所以现在 ListTile 的状态将被更新，并且不需要为完整的列表视图设置状态。

Answer 2

要更新 Listtile 中的数据（标题和副标题），您需要使用 Stream 和 Streambuilder，它们将根据数据库中的流更改更新数据。