Flutter中的Scaffold和MaterialApp有什么区别？

Question

我有两个屏幕，其中
第一：来自Firebase的数据列表
第二：在该屏幕上添加数据，因此我想回到第一个屏幕，一切都正常工作，只是返回时出现了黑屏。现在问题已经解决，我已经搜索了它的工作原理，但我的概念仍然不清楚，有人能描述一下它的工作原理吗？

After:

我有两个屏幕：
第一个屏幕：来自 Firebase 的数据列表
第二个屏幕：在该屏幕上添加数据，因此我想回到第一个屏幕。
一切都正常工作，只是当我返回时会出现一个黑屏幕。现在这个问题已经解决了，尽管我仍不清楚它的工作原理。有人可以描述一下它的工作原理吗？

return new MaterialApp(
      title: "AddEditNames ",
      home: new AddEditNameScreen(),
);

替换后：当我用新内容替换它时

 return new Scaffold(
      backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
      body: new AddEditNameScreen(),
      appBar: new AppBar(
        elevation: 0.0,
        backgroundColor: Colors.blueAccent,
        actions: <Widget>[
        ],
        title: new Text(
          "AddEditNames",
          style: new TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
 );

- Richa Shah

Answer 1

MaterialApp 是你的应用程序的起点，它告诉Flutter你将使用Material组件并在你的应用程序中遵循Material Design。

Scaffold 在MaterialApp下使用，它为您提供许多基本功能，如AppBar、BottomNavigationBar、Drawer、FloatingActionButton等。

这就是一个典型应用程序的启动方式。

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: YourWidget(),
    ),
  ));
}

- CopsOnRoad

---

在我的Flutter应用程序中，我已经为所有屏幕使用了MaterialApp。那么这会影响性能吗？@CopsOnRoad - Balaji

除非你想要做一些奇怪的事情，否则整个应用程序应该只有一个MaterialApp。 - CopsOnRoad

如果MaterialApp已经告诉我们可以使用Material组件，如AppBar等，那么为什么要使用Scaffold？反之亦然。 - NullByte08

Answer 2

MaterialApp 是一个小部件，引入了一些必须构建 Material 设计应用程序的小部件 (Navigator, Theme )。

Scaffold 允许您实现大多数应用程序都具有的标准材料应用程序小部件，例如 AppBar、BottomAppBar、FloatingActionButton、BottomSheet、Drawer 和 Snackbar。

Scaffold 被设计为 MaterialApp 的单个顶层容器，虽然嵌套 Scaffold 不是必需的。

此外，可以查看官方 Flutter 文档了解有关 MaterialApp 和 Scaffold 的更多信息。

- ibhavikmakwana

---

当我将 Navigator.of(mContext).pushNamed('/screen1') 放在 MaterialApp 中时，它不能正常工作，但是当我将其放在 Scaffold 中时，它按照预期的方式工作。因此，我的疑惑在于它如何在堆栈中表现？ - Richa Shah

“Scaffold被设计为MaterialApp的单个顶级容器，尽管嵌套Scaffold并非必需。”这句话听起来好像MaterialApp通常只包含一个Scaffold。但是当有多个页面和Navigator时，不一定如此。 - NiklasPor

Answer 3

Material app 是核心组件和预定义类。我们可以使用 Material app 创建小部件以在 Flutter 中设计应用程序。Material app 具有几个属性，其中一些是标题、主页、主题、颜色、路由等。

Scaffold 也是另一个可用于设计应用程序的类。它为我们提供了 API，例如 snack bars、bottom sheets、app bar、floating action bar 等。Scaffold 为我们提供了一个框架来实现应用程序的视觉布局结构。

- SandaliTP

Answer 4

在Flutter中，MaterialApp作为根部件用于创建基于Material Design的应用程序。它引入了导航和主题等关键组件到应用程序中。另一方面，Scaffold是MaterialApp中的一个关键组件，为应用程序的用户界面提供结构布局。

将Scaffold视为一个平台，为构建应用程序界面提供基础。它包括各种内置功能，如AppBar、BottomNavigationBar、Drawer、FloatingActionButton、BottomSheet等等。这些功能帮助您建立一致的视觉结构并增强用户体验。

实质上，MaterialApp设置了应用程序的整体主题和导航，而Scaffold提供了一个现成的布局结构和预定义的小部件。您可以自定义和扩展Scaffold来创建所需的应用程序布局和功能。

值得注意的是，“Scaffold”这个术语本身就暗示了一个类似平台的结构。此外，我提到了“root”，它指的是小部件层次结构中最顶层的小部件，作为应用程序的起点。

类似于谷歌的设计系统中的MaterialApp和Scaffold，在苹果的设计系统中，我们在Flutter中有CupertinoApp和CupertinoPageScaffold。

- Takshak Rajput