MaterialApp 与 Scaffold的区别

在 Flutter 中，MaterialApp 和 Scaffold 都是常用的 UI 组件，但它们的作用和使用场景有所不同。

MaterialApp 是一个小部件，用于定义一个 Material Design 应用程序的根级别小部件。它提供了一些全局设置，如主题、本地化、应用程序路由等，并在应用程序中创建了一个名为 Navigator 的路由管理器，使得用户可以在应用程序中通过路由来浏览不同的页面。

而 Scaffold 则是在一个页面中实现 Material Design 布局结构的一个基本部件，它包含了很多常见的 UI 组件，如 App Bar、底部导航栏、抽屉菜单等，可以帮助开发者快速搭建具有丰富交互性的页面。

因此，通常情况下，在一个 Flutter 应用程序中，我们会使用 MaterialApp 作为根部件来定义应用程序的全局属性和路由管理。而在具体的页面中，则会使用 Scaffold 来构建页面布局，其中包含了不同的 UI 组件。

下面是一个简单的示例代码，展示了如何使用 MaterialApp 和 Scaffold：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Do something
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

在上面的代码中，我们首先通过 MaterialApp 定义了一个应用程序，并设置了应用程序的主题和根路由为 MyHomePage()。然后，在 MyHomePage 中，我们使用 Scaffold 来实现页面布局，包含了一个 App Bar、主体内容区域以及一个悬浮按钮。