Scaffold 使用和 AppBar in 构建 UI Flutter

在 中，您可以使用 和小部件 Flutter 构建简单但功能强大的用户界面 。 为应用程序提供基本结构，其中包含应用程序栏、应用程序主体和导航按钮等常见元素。 是应用程序标题和导航选项 的一部分并包含它。 Scaffold AppBar Scaffold AppBar Scaffold

以下是有关如何使用 Scaffold 和构建简单用户界面的指南 AppBar：

创建一个新 Flutter 应用程序

首先， Flutter 通过在以下位置运行以下命令来创建一个新应用程序 terminal：

flutter create app_name

（替换 app_name 为您的应用程序所需的名称）。

编辑 main.dart 文件

在 main.dart 文件（lib 文件夹内）中，将内容替换为以下内容：

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

在上面的示例中，我们使用 Scaffold 和创建一个应用程序 AppBar。 包含 传递给属性的用户界面 Scaffold 主体 。 AppBar body

运行应用程序

最后，要运行应用程序，请在以下位置运行以下命令 terminal：

flutter run

Flutter 您的应用程序将在应用程序栏上显示标题为“ App with Scaffold and ” 的屏幕，并  在屏幕中央 AppBar 显示文本。 Hello, world!

结论： Scaffold 和 AppBar 是两个重要的小部件， Flutter 可帮助您构建简单且实用的用户界面。 通过使用它们，您可以使用基本 UI 组件（如应用栏和应用主体）创建有吸引力的应用程序。