【译】Flutter For Android Developers：如何在Flutter中设计Activity UI

最新推荐文章于 2024-08-01 11:49:36 发布

Luyifei666

最新推荐文章于 2024-08-01 11:49:36 发布

阅读量690

点赞数

分类专栏： Flutter

Flutter 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解Flutter中的Scaffold小部件，展示如何使用Flutter构建类似Android Activity的UI，包括Appbar、Body、Drawer和BottomNavigationBar的设计。

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

demo下载

此博客适用于希望应用现有的Android知识的Android的开发人员使用颤振构建移动应用程序。在这篇博客中，我们将探讨与颤振中的活性相同的内容。

原文地址

系列

如何在Flutter中设计Activity UI。（你在这里）
如何在Flutter中设计LinearLayout。
如何在颤振中设计的FrameLayout。

先决条件

此博客已假设您已经在PC中设置了颤振，并且能够运行Hello World应用程序。如果您尚未安装颤振，请从此处开始。

Dart基于面向对象的概念，因此作为android java开发人员，您将能够轻松地捕获dart。

目标

在本博客的最后，我们将能够使用flutter小部件创建一个Activity UI，如下所示。

从技术上讲，如果你深入了解由扑生成的安卓并项目检查AndroidMenifest.xml文件，那么你会发现它运行在一个单独的活动上，即FlutterActivity，但是我们这篇博客的目的是关注如何在颤动中设计活动UI？答案是...... 脚手架。

脚手架

脚手架是可视化表示我们的活动UI的小部件。作为Android开发人员，我们将活动用于单个屏幕表示，其中包括许多视图，如工具栏，菜单，抽屉，底部导航栏，小吃栏，浮动操作按钮等。我们还在活动中使用FrameLayout的 Fragment容器。脚手架以小部件的形式构建了所有这些视图。

记住颤动的一切都是一个小部件。

https://flutter.io/widgets/material/

上面的图片是脚手架的直观表示，它提供了用于显示侧面和右侧的API，的英文这我们的DrawerLayout底部栏，即BottomNavigationView应用程序栏，的英文它一个Toolbar内容区域，FrameLayout在本例中我们可以将其视为容器。

由于脚手架是材料小部件的一部分，因此需要材料应用程序的祖先，将我们MaterialApp在即将发布的博客中详细讨论。目前，我们将专注于如何创建脚手架小部件。

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Scaffold(
      ),
    ));

当您运行此代码时，您将看到白色空白屏幕，因为您还没有在脚手架中定义任何内容，所以我们让使用backgroundColor属性定义主页背景颜色并设置这样的黄色。

void main() => runApp(new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.yellowAccent,
      ),
    ));

现在，当您运行它时，您将看到全屏幕覆盖黄色背景颜色。您可以使用不同的属性来玩并使用热重载来检查输出，还您可以在其官方文档中检查脚手架的可用属性。

现在我们知道如何创建一个脚手架，我们将逐一探索它的主要属性

1. Appbar（工具栏）

AppBar与显示Toolbar我们在活动中使用的工具栏小部件类似的工具栏小部件。下图显示了当编写语言从左到右（例如英语）时每个Appbar属性在工具栏中的显示位置。

https://docs.flutter.io/flutter/material/AppBar-class.html

领先：在标题之前显示的小部件。这是小部件，通常显示汉堡包图标或后退按钮。
标题：Toolbar标题所有游戏在Text小部件中。
动作：这相当于menu.xml我们设置<item/>显示菜单列表的位置，这里动作属性采用窗口小部件的列表来显示Appbar中的菜单，通常这些窗口小部件是相当于的IconButton<item/> 。
底部：底部通常用于TabBarAppbar下方。
flexibleSpace ：此小部件用于CollapsingToolbarLayout使用Appbar创建效果。

您可以创建具有前导，标题和菜单的简单Appbar，如下所示：

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: new AppBar(
          leading: new Icon(Icons.menu),
          title: new Text("My Title"),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.shopping_cart),
              onPressed: () {},
            ),
            new IconButton(
              icon: new Icon(Icons.monetization_on),
              onPressed: () {},
            )
          ],
        ),
      ),
    ));

这是上面代码的输出。它看起来与我们在活动中使用的工具栏视图完全相同，您可以通过添加/删除窗口小部件，为特定窗口小部件提供样式或颜色来解决这个问题。

作为练习，您可以浏览剩余的appbar属性并使用它

2.body（任何视图的容器）

这是脚手架的主要内容。这在安卓中充当片段容器。它需要一个小部件才能在容器区域中显示。这是我们连接主要内容以向用户显示的区域。在我们的例子中，为了简单起见，我们将为身体添加红色。在一个真实世界的例子中，它将不仅仅是使用的ListView，行，列，堆栈等背景颜色。

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: new AppBar(
          leading: new Icon(Icons.menu),
          title: new Text("My Title"),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.shopping_cart),
              onPressed: () {},
            ),
            new IconButton(
              icon: new Icon(Icons.monetization_on),
              onPressed: () {},
            )
          ],
        ),
        body: new Container(
          color: Colors.red,
        ),
      ),
    ));

体属性显示在应用程序栏下面，后面是floatingActionButton和抽屉。尽管我们已将黄色背景应用于我们的脚手架，但此输出显示红色与脚手架背景重叠。

3.抽屉（DrawerLayout）

此小部件表示DrawerLayout的Android中的视图，该视图从活动的边缘水平滑动以显示应用程序中的导航链接。

https://flutter.io/widgets/material/

抽屉通常与Scaffold.drawer属性一起使用。就像在android中我们使用NavigationView内部a DrawerLayout，下面的表显示了android中的等效视图和抽屉的颤动

抽屉的子项通常是ListView，其第一个子项是DrawerHeader，它显示有关当前用户的状态信息。剩余的抽屉子项通常使用ListTile构建，下面的代码显示如何创建抽屉。

。

这将是您运行上述代码时的输出。在代码中需要注意的一点是我们已经从appbar中删除了前导图标，因此每当您将抽屉添加到脚手架时，它会自动将汉堡包图标添加到appbar的主要小部件中。

有关抽屉的详细信息，请查看此

3. BottomNavigationBar（BottomNavigationView）

显示在应用程序底部的材料窗口小部件，用于在少量视图中进行选择，通常在3到5之间。

底部导航栏由文本标签，图标或两者形式的多个项目组成，布置在一块材料的顶部。

底部导航栏通常与支架一起使用，它作为Scaffold.bottomNavigationBar参数提供。

在Android中，你可以BottomNavigationView使用app:menu=”@menu/my_navigation_items”在哪里定义菜单项，其中my_navigation_items 包含<item/>标记中所有菜单的列表。但是在颤动中，我们使用items属性，其列表BottomNavigationBarItem由菜单的图标，标题和背景颜色组成。

。