Flutter应用程序中每个页面的多个脚手架

问题描述

API文档: https://api.flutter.dev/flutter/material/Scaffold-class.html 说:

这是否意味着在Material App下仅需要一个单一的脚手架，或者每个页面仅需要一个单一的父脚手架.如果是第一个，我们如何导航?如果是更高版本，这是否意味着在每个导航上都重新渲染通用的AppBar和BottomBar?最佳做法是什么?

Does it mean there needs to be only one single Scaffold under the Material App or one single parent Scaffold for each page. If it's the first, how do we navigate? If the it's later, doesn't it mean the common AppBar and BottomBar get re-rendered on each navigation? What's the best practice.

推荐答案

这意味着通常每个页面(更准确地说，每个Route/屏幕)应该有一个Scaffold，并且您应该不嵌套Scaffold.

It means that, usually, there should be one Scaffold for each page (more precisely, for each Route/screen), and that you should not nest Scaffolds.

例如，看看可以在 DartPad 中运行的代码段:

For example, take a look at this snippet that you can run in DartPad:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

在这里，您可以看到有两个不同的页面/Route s/屏幕，每个页面都有自己的Scaffold.我们通过使用Navigator来回导航，因此我们的页面被添加到堆栈中，其中一个Scaffold在另一个页面的顶部.很好.

Here, you can see there are two distinct pages/Routes/screens, and each one has its own Scaffold. We are navigating back and forth by using Navigator, and so our pages are being added to the stack, one Scaffold on top of the other. That is fine.

是的，但这正是我们制作两个单独的屏幕时想要的，每个屏幕都有自己的Scaffold.

Yes, but that is precisely what we want when we make two separate screens, each one with its own Scaffold.

另一方面，请看以下示例:

On the other hand, take a look at this example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('Open route'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

在这里，我们嵌套两个Scaffold，并且，如您所见，第二个应用程序栏被绘制在第一个应用程序栏的下方.对于选项卡式导航或嵌套式导航，这不是最佳方法.如果要在Scaffold的正文中导航并根据内容更改应用程序栏，则首选使用TabControllers，例如DefaultTabController.看一下这个例子:

Here, we are nesting two Scaffolds, and, as you can see, the second app bar is being drawn below the first app bar. That would not be the best approach for tabbed or nested navigations. If you want to navigate inside the body of a Scaffold, and change the app bar depending on the content, using TabControllers, such as DefaultTabController, is preferred. Take a look at this example:

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

如您所见，我们只使用了一个Scaffold，因为我们实际上只处理一个屏幕.碰巧我们想要显示内容页面并在Scaffold的正文中导航.

As you can see, we have used only one Scaffold, since we are dealing with only one screen, really. It just happens that we want to show content pages and navigate inside the body of the Scaffold.

作为一般经验法则:每个Route/屏幕仅使用一个Scaffold.只能将一个Scaffold与诸如TabController或IndexedStack之类的小部件一起使用，以浏览单个屏幕主体内的内容.

As a general rule of thumb: use only one Scaffold per Route/screen. Use only one Scaffold with widgets such as TabController or IndexedStack to navigate the content inside the body of a single screen.

这篇关于Flutter应用程序中每个页面的多个脚手架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！