如何在没有 Flutter 上一个屏幕的应用栏的情况下推送到 Flutter 中的新屏幕？

Question

我有两个屏幕。在 screen1 中，我在正文中有一个应用栏和一张卡片。如果我单击卡片，它应该会带我到新屏幕 'screen2'。我正在获取 screen2，但我也从 screen1 获取 appbar。我正在从 screen1 推送到 screen2。我可以知道如何避免 screen2 中 screen1 的 appbar 吗？我在 VideoCard 小部件中有推送到屏幕 2 的 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'),
        );
      }
    }

如何在没有 Flutter 上一个屏幕的应用栏的情况下推送到 Flutter 中的新屏幕？

How to push to a new screen in Flutter without the appbar from the previous screen in Flutter?

navigation

screen

appbar

flutter