联系人资料页面

在本节中，你将动手实践构建属于你自己的 联系人资料页面（如下图所示），同时学习更多关于 Flutter 小部件的基础知识。

在接下来的课程中，你将学习以下新小部件：

• Padding
• ListView
• Column
• Container
• Divider
• Row
• ListTile

在本章中，你将使用这些新小部件，以及上一节介绍的小部件。作为提醒，上一节使用的小部件列表如下：

• MaterialApp
• Scaffold
• AppBar
• Icon
• Text
• IconButton
• TextStyle

资料页面屏幕的构成

让我们来看看 资料页面 的主要组成部分：

1. MaterialApp 小部件： MaterialApp 是包裹其他小部件以实现 Material Design 的小部件。它有一个 home 属性，用于在应用程序启动时提供默认屏幕。

2. Scaffold 小部件： Scaffold 小部件定义了 appBar 和 body 属性，用于显示屏幕顶部的内容，以及屏幕的主要内容。

   

创建 MaterialApp

让我们从使用 StatelessWidget 创建一个骨架 MaterialApp 开始。

• 导入 material.dart 包

  1import 'package:flutter/material.dart';

• 创建 StatelessWidget

  创建 ContactProfilePage 无状态小部件以创建 MaterialApp。

  将 home 属性设置为 Scaffold() 小部件。必须分配 home 属性，否则应用会崩溃。这是因为 MaterialApp 需要知道应用程序启动后要显示什么内容。此时，你会看到一个空白的白色屏幕。

  1class ContactProfilePage extends 
  2  StatelessWidget {
  3  @override
  4  Widget build(BuildContext context) {
  5    return MaterialApp(
  6      home: Scaffold(),
  7    );
  8  }
  9}

• 移除 debugBanner

  通过将 debugShowCheckedModeBanner 设置为 false 来移除 debugBanner。

  1class ContactProfilePage extends 
  2  StatelessWidget {
  3  @override
  4  Widget build(BuildContext context) {
  5    return MaterialApp(
  6      debugShowCheckedModeBanner: false,
  7      home: Scaffold(),
  8    );
  9  }
  10}

• 应用入口点：main() 方法

  定义 main() 方法作为应用的入口点。

  1void main() => 
  2runApp(ContactProfilePage());

运行代码

尝试运行下面的代码片段，查看空的 Scaffold 小部件的渲染效果。你会观察到一个空白的白色屏幕。

请注意，Android 模拟器可能需要更长时间（约 3 分钟）才能启动。

在本课中，你学会了为 资料页面 创建根小部件。

在下一课中，你将使用 AppBar 小部件构建 资料页面 屏幕的顶部部分。