Flutter将“列表”磁贴导航到列表详细信息页面

时间:2020-05-02 15:56:31

标签: flutter

有一个待办事项应用,可在屏幕上列出所有待办事项 这是我的列表视图

<TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="317dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="@+id/textView6"
        app:layout_constraintStart_toStartOf="@+id/textView6"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="@+id/button"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button" />

当我按下ontap时,它应该转到详细信息页面,该页面仅显示特定任务的详细信息(注意:我现在仅具有值Title和summary,稍后我将添加其余内容,它们应显示在详细信息页面中) 我的详细视图如下

   class assignedTask extends StatefulWidget {
      static const String id = 'assignedTask';
      @override
      _assignedTaskState createState() => _assignedTaskState();
    }

    class _assignedTaskState extends State<assignedTask> {
      String Title;
      String Summary;

      var tasks;

      crudMedthods crudObj = new crudMedthods();

      var documentID;
      var documents;



      Future<bool> addDialog(BuildContext context) async {
        return showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('Add Data', style: TextStyle(fontSize: 15.0)),
                content: Container(
                  height: 125.0,
                  width: 150.0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(hintText: 'Enter Title'),
                        onChanged: (value) {
                          this.Title = value;
                        },
                      ),
                      SizedBox(height: 5.0),
                      TextField(
                        decoration: InputDecoration(hintText: 'Enter Summary'),
                        onChanged: (value) {
                          this.Summary = value;
                        },
                      ),
                    ],
                  ),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Add'),
                    textColor: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                      crudObj.addData({
                        'Title': this.Title,
                        'Summary': this.Summary
                      }).then((result) {
                        dialogTrigger(context);
                      }).catchError((e) {
                        print(e);
                      });
                    },
                  )
                ],
              );
            });
      }

      Future<bool> updateDialog(BuildContext context, selectedDoc) async {

        return showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('Update Data', style: TextStyle(fontSize: 15.0)),
                content: Container(
                  height: 125.0,
                  width: 150.0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(hintText: 'Title'),
                        onChanged: (value) {
                          this.Title = value;
                        },
                      ),
                      SizedBox(height: 5.0),
                      TextField(
                        decoration: InputDecoration(hintText: 'Enter Summary'),
                        onChanged: (value) {
                          this.Summary = value;
                        },
                      ),
                    ],
                  ),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Update'),
                    textColor: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                      crudObj.updateData(selectedDoc, {
                        'Title': this.Title,
                        'Summary': this.Summary
                      }).then((result) {
                        // dialogTrigger(context);
                      }).catchError((e) {
                        print(e);
                      });
                    },
                  )
                ],
              );
            });
      }

      Future<bool> dialogTrigger(BuildContext context) async {
        return showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('Job Done', style: TextStyle(fontSize: 15.0)),
                content: Text('Added'),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Alright'),
                    textColor: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  )
                ],
              );
            });
      }

      @override
      void initState() {
        crudObj.getData().then((results) {
          setState(() {
            tasks = results;
          });
        });
        super.initState();
      }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: AppBar(
              title: Text('Assigned Tasks'),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    addDialog(context);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.refresh),
                  onPressed: () {
                    crudObj.getData().then((results) {
                      setState(() {
                        tasks = results;
                      });
                    });
                  },
                )
              ],
            ),
            body: _TaskList(),
        );
      }

      Widget _TaskList() {
        if (tasks != null) {
          return StreamBuilder(
            stream: tasks,
            // ignore: missing_return
            builder: (context, snapshot) {
              if (snapshot.data != null) {
                return ListView.builder(
                  itemCount: snapshot.data.documents.length,
                  padding: EdgeInsets.all(7.0),
                  itemBuilder: (context, i) {
                    return  ListTile(
                      title: Text(snapshot.data.documents[i].data["Title"]??""),
                      subtitle: Text(snapshot.data.documents[i].data["Summary"]??""),
                      /*onTap: () {
    *//*
                        updateDialog(
                            context, snapshot.data.documents[i].documentID);
                      },*/
                        onTap: (){
                          Navigator.push(context,MaterialPageRoute(builder:(context)=>detailview(context,snapshot.data.douments[i].documentid)));
                        },

                     onLongPress: () {
                        crudObj.deleteData(snapshot.data.documents[i].documentID);
                      },
                    );
                  },
                );

              }
              return CircularProgressIndicator();
            },
          );
        } else {
          return Text('Loading, Please wait..');
        }
      }
    }

如何在详细信息页面中访问特定点击值的值。

1 个答案:

答案 0 :(得分:0)

只需将DocumentSnapshot传递到您的详细信息页面,如下所示:

onTap: (){
        Navigator.push(context,MaterialPageRoute(builder:(context)=>DetailPage(context,snapshot.data.douments[i])));
      },

在您的详细信息页面中,接收DocumentSnapshot并访问从中获取的所有内容。

class DetailPage extends StatelessWidget {
  DocumentSnapshot detailDocument;
  DetailPage(this.detailDocument);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(detailDocument.data["Title"]),
      ),
      body: Center(
        child: Text(detailDocument.data["Summary"]),
      ),
    );
  }
}