Flutter基础（五）Material组件之MaterialApp、Scaffold、AppBar

最新推荐文章于 2025-06-02 09:02:11 发布

原创

最新推荐文章于 2025-06-02 09:02:11 发布 · 1.1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #MaterialApp #Scaffold #AppBar

本文介绍了Flutter中的Material组件，包括MaterialApp、Scaffold和AppBar的使用。MaterialApp是实现Material Design的基础，包含了路由管理。Scaffold提供基本布局结构，而AppBar则用于设置顶部标题栏。文中详细讲解了如何新建和注册路由，以及Scaffold和AppBar的各种属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文首发于公众号「刘望舒」

关联系列
ReactNative入门系列
 React Native组件
 Flutter基础系列

前言

在上一篇文章Flutter基础（四）开发Flutter应用前需要掌握的Basics Widget，我们学习了Basics Widget，除了Basics Widget，我们还需要了解Material Components，也就是Material组件。它提供了实现Material Design准则的视觉、行为和动作的Widget。
官方将Material组件分为为几个类型：

应用程序结构和导航
Button
输入和选择
对话框，警告弹框和面板
信息显示
布局

主要介绍应用程序结构和导航，会分为两篇文章进行介绍，这一篇介绍应用程序结构和导航分类中的MaterialApp、Scaffold、AppBar。

1.MaterialApp

说到Material组件，不得不提到MaterialApp，它包含了许多Widget，这些Widget通常是实现Material Design的应用程序所必需的。
MaterialApp在此前的文章都用过，简单的使用这里就不介绍了，这里简单介绍下路由。
在Android开发中我们使用Intent来进行界面跳转，也称之为原生路由，后来出现了一些路由框架，比如ARouter。
在Flutter中进行界面跳转的就是路由，路由用Route类来进行表示，Navigator是对Route进行管理的Widget。Navigator不仅管理了一堆route，还提供管理堆栈的方法 Navigator.push 和 Navigator.pop，通过路由对象的进出栈来控制页面的跳转。

flutter路由的使用方式主要有两种，一种是新建路由，一种是注册路由。我们分别用这两种方式写例子：
首屏是第一个界面，通过第一个界面的按钮跳转到第二页，点击第二页的按钮回到第一页。

1.1 新建路由

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      title: 'Material Components',
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: Text('第一页'),
      ),
      body: Padding(
        padding: EdgeInsets.all(30.0),
        child: RaisedButton(
          child:  Text('跳转到第二页'),
          onPressed: () {
   
   
            Navigator.push(//1
              context,
              MaterialPageRoute(builder: (context) => SecondPage