如何从名为 MyHomePage 的 StatefulWidget 中调用名为 MyDetailPage 的其他“ StatefulWidget ”或方法？答案

【问题标题】：How can I call other ' StatefulWidget ' or method which is named as MyDetailPage from the StatefulWidget named as MyHomePage?如何从名为 MyHomePage 的 StatefulWidget 中调用名为 MyDetailPage 的其他“ StatefulWidget ”或方法？
【发布时间】：2020-10-02 17:11:40
【问题描述】：

在这里，我创建了两个名为 MyHomePage 和 MyDetailPage 的“StatefulWidget”。第一个 StatefulWidget 存储 Image、Appbar 和第二个 StatefulWidget 正在尝试从 cloud firestore 获取数据。

但现在的问题是“我如何调用放置在 MyHomePage 类旁边的 MyDetailPage 类以及我应该在哪里添加更改，以便所有获取的数据都位于 Image 和 Appbar 下。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(


      body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:<Widget>[
              SizedBox(
                height: 30.0,
              ),

              Card(

                  child: Image.asset(
                    'images/picture_logo.jpg',
                    height: 120,
                    fit: BoxFit.cover,
                  )

              ),
              Text(
                'Please Select your Preference!!',
                style:TextStyle(
                  fontFamily: 'SourceSansPro',
                  fontSize: 17.0,
                  color:Colors.black,
                  letterSpacing: 3.5,
                  fontWeight: FontWeight.bold,
                ),
              ),

              AppBar(
                title: Text('Flutter Demo Home Page'),
              ),

                // Want to call MyDetailPage  under the AppBar.
                // What changes I should add here to call "MyDetailPage" class ?

            ],
          )
      ),
    );
  }
}

class MyDetailPage extends StatefulWidget {
  @override
  _MyDetailPageState createState() => new  _MyDetailPageState();
}

class _MyDetailPageState extends State<MyDetailPage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(

        body:
        StreamBuilder(
    stream:  Firestore.instance.collection('client').snapshots(),
    builder: (context,snapshot){
      return ListView.builder(
          itemCount: snapshot.data.documents.length,
        itemBuilder: (context,index){
            DocumentSnapshot client =snapshot.data.documents[index];
            return SingleChildScrollView(
              child: Container(
                height: 300,
                child: Card(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(color: Colors.purpleAccent,width: 2),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      
                        SizedBox(width: 10),

                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text('Name:- ${client['fname']}\n',),
                              
                              
                              
                              
                              
                              
                            ],
                          ),
                        )

                      ],
                    ),
                  ),
                ),
              ),
            );
        },
      );
    },
    )

    );
  }
}

【问题讨论】：

您是否尝试将其放在应用栏下方，如下所示：MyDetailPage()
从第二页删除脚手架并将页面作为小部件调用。它可能会导致 flex 小部件问题，在 flex 小部件下的 listview.. 所以为 listview 提供边界或在 listview 中使用收缩包装为 true ..而且你不需要在listview builder中使用singlechildscrollview
@proversion。你能在代码的帮助下解释一下吗，因为我很难理解。

标签： flutter dart firebase-realtime-database google-cloud-firestore

【解决方案1】：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

 class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
  return new Scaffold(
  body: SingleChildScrollView(
      child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      SizedBox(
        height: 30.0,
      ),

      Card(
          child: Image.asset(
        'images/picture_logo.jpg',
        height: 120,
        fit: BoxFit.cover,
      )),
      Text(
        'Please Select your Preference!!',
        style: TextStyle(
          fontFamily: 'SourceSansPro',
          fontSize: 17.0,
          color: Colors.black,
          letterSpacing: 3.5,
          fontWeight: FontWeight.bold,
        ),
      ),

      AppBar(
        title: Text('Flutter Demo Home Page'),
      ),

      MyDetailPage(), // Added the class here

      // Want to call MyDetailPage  under the AppBar.
      // What changes I should add here to call "MyDetailPage" class ?
    ],
  )),
);
}
}

class MyDetailPage extends StatefulWidget {
 @override
_MyDetailPageState createState() => new _MyDetailPageState();
}

class _MyDetailPageState extends State<MyDetailPage> {
 @override
 Widget build(BuildContext context) { 
//Rempved Scaffold and return a Container
return new Container(
  height: 300,
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return Container(
        height: 300,
        child: Card(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            side: BorderSide(color: Colors.purpleAccent, width: 2),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: <Widget>[
                SizedBox(width: 10),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Name:- NAME\n',
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      );
    },
  ),
);
}
}

【讨论】：