Flutter/Firebase - 正确的轨道？

Question

在 54 岁时，我正在自学 Flutter，并且已经取得了长足的进步。我（再次）遇到了关于我实施 Firebase 的障碍。虽然我得到了为每条记录显示一行数据的基本知识，但问题在于每条记录的详细信息。我认为问题在于我没有引用记录 ID。

在查看无穷无尽的示例时，我还认为用于显示记录的 ListView 的代码过于臃肿，使得获取记录和显示所有字段（编辑屏幕）变得更加困难。

我想点击“Walsh-Test”链接查看所有字段并进行更新。我可以创建一个新的编辑/更新屏幕我最初的问题是打开屏幕到选定的记录。

任何建议将不胜感激。

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/rendering.dart';

class MeterReadHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Color(0xff4367b1),
        automaticallyImplyLeading: false,
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
        ),
        title: Text(
          "WelakaOne",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('meter_reads')
            .orderBy('accountname')
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          return Padding(
            padding: const EdgeInsets.fromLTRB(6, 20, 0, 0),
            child: Container(
              child: GestureDetector(
                onTap: () {},
                child: ListView(
                  children: snapshot.data.docs.map(
                    (document) {
                      return Row(
                        children: [
                          Container(
                            width: 50,
                            child: Icon(
                              Icons.access_alarm,
                              size: 36,
                              color: Color(0xff4367b1),
                            ),
                          ),
                          Container(
                            child: Text(
                              document['accountname'],
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff4367b1),
                              ),
                            ),
                          ),
                          SizedBox(height: 44),
                        ],
                      );
                    },
                  ).toList(),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
[![Flutter/Firebase/Open to Selected Record][1]][1]

Answer 1

我了解到您想在点击警报磁贴时转到另一个页面（编辑屏幕）。 所以，我的建议是使用 ListTile 小部件，而不是您正在使用的行小部件。

您可以阅读 ListTile 的 onTap 属性，here 关于路由到新屏幕/页面，您必须使用 MaterialPageRoute 创建新路由，并使用 Navigator 的 push 方法将其推送到您的 Material App。

附加一个使用 Navigator 转到不同页面的示例代码，您需要应用程序的 BuildContext。以下是如何获取它的示例：

import 'package:flutter/material.dart';
import 'package:rate_your_professor/screens/firstScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Some App',
      home: SomeApp(),
    );
  }
}

class SomeApp extends StatelessWidget {
  Widget getListView(BuildContext context) {
    var listView = ListView(
      children: <Widget>[
        Text(
          "XXXXXXXXXXXXXXX",
          textDirection: TextDirection.rtl,
          textAlign: TextAlign.center,
        ),
        ListTile(
          leading: Icon(Icons.location_city),
          title: Text("XXXXX ", textDirection: TextDirection.rtl),
          subtitle: Text(
            "XXXXXXXXXX",
            textDirection: TextDirection.rtl,
          ),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => YourNewPage(),
                  ),
            );
          },
        ),
      ],
    );
    return listView;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: getListView(context));
  }
}