如何在沒有 Flutter 中上一個屏幕的應用欄的情況下推送到 Flutter 中的新屏幕？

Question

我有兩個屏幕。 在 screen1 中，我在正文中有一個應用欄和一張卡片。 如果我單擊卡片，它應該會帶我到新屏幕“screen2”。 我正在獲取 screen2，但我也從 screen1 獲取 appbar。我正在從 screen1 推送到 screen2。我可以知道如何避免 screen2 中 screen1 的 appbar 嗎？ 我在推送到 screen2 的 VideoCard 小部件中有 onTap 方法......看起來 screen1 的主體正在被 screen2 取代......相反我需要從 screen1 推送到 screen2 ......

在此處輸入圖像描述

    class _AllVideosPageTabletState extends State<AllVideosPageTablet> {
  bool searchFlag = false;
  String searchText = '';

  @override
  void initState() {
    searchFlag = false;
    searchText = '';

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final isLandscape = MediaQuery.of(context).orientation ==
        Orientation.landscape; 
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(10.0),
        child: Column(
          children: [
            CupertinoSearchTextField(
              onChanged: (value) {
                if (value != '') {
                  setState(
                    () {
                      searchFlag = true;
                      searchText = value;
                    },
                  );
                }
              },
              onSubmitted: (value) {
                if (value != '') {
                  setState(
                    () {
                      searchFlag = true;
                      searchText = value;
                    },
                  );
                }
              },
            ),
            Divider(),
            Row(
              children: [
                IconButton(
                  icon: Image.asset('lib/assets/icons/back.png'),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Text(
                        'All Videos',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: '#D86300'.toColor(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            searchFlag
                ? SearchResultsListView(searchText)
                : Expanded(
                    child: FutureBuilder(
                      future: VideoXML().getDataFromXML(context),
                      builder: (context, data) {
                        if (data.hasData) {
                          List<Video> videoList = data.data;
                          return GridView.count(
                            scrollDirection: Axis.vertical,
                            crossAxisCount: isLandscape ? 4 : 2,
                            crossAxisSpacing: 10.0,
                            mainAxisSpacing: 10.0,
                            children: videoList.map(
                              (video) {
                                return Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: VideoCard(
                                      video.title,
                                      video.name,
                                      video.image,
                                      ),
                                );
                              },
                            ).toList(),
                          );
                        } else {
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }

Answer 1

Flutter 的工作方式是每個新屏幕都基於一個新的 Scaffold 小部件。 通過這種方式，您可以自定義，是完全顯示 appBar 還是應該在不同的屏幕上顯示不同的 appBar。

例如：

屏幕 1 應該是它自己的腳手架：

class FirstScreen extends StatelessWidget {
  @override 
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBar(title:'Screen 1'), 
      body:  InkWell(onTap: () => Navigator.of(context).pushedName(routeToSecondScreen),
        child: Text('Navigate to secondScreen'),
        );
    );
  }
}

屏幕 2 應該是它自己的腳手架：

class SecondScreen extends StatelessWidget {
      @override 
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(title:'Screen 2'), 
          body:  Text('Screen 2'),
        );
      }
    }

這樣您就可以為每個屏幕設置不同的 appBar。 如果您根本不希望在第二個屏幕上顯示appBar ，只需不在第二個屏幕上指定appBar ，如下所示。

class SecondScreen extends StatelessWidget {
      @override 
      Widget build(BuildContext context) { 
        return Scaffold(
          body:  Text('Screen 2'),
        );
      }
    }