Code前端首页关于Code前端联系我们
首页 移动开发移动小程序正文

如何在Flutter中设计动作界面？

terry 2年前 (2023-09-23) 阅读数 71 #移动小程序

Dart是一种面向对象的语言，对于 Android 开发者来说很容易学习。

目的

在本文的最后，我们将使用 Flutter 创建如下所示的 Activity 布局。 Flutter 中如何设计 Activity 界面?

从技术上讲，如果您检查过 Flutter 创建的 Android 项目并查看其 AndroidMenifest.xml 文件，您会发现它只运行一个 Activity，例如 Flutter。 ，但是本文的问题是如何在Flutter中设计一个action界面？
答案是...脚手架。

Scaffold

Scaffold 是一个代表操作界面的小部件。作为Android开发者，我们使用一个Activity来呈现屏幕内容，其中可以包括顶部工具栏（toolbar）、菜单（menu）、侧边滑块（drawer）、底部导航栏（BottomNavigationBar）、底部提示（snackBar）、浮动。按钮（FloatActionButton）等，我们还使用FrameLayoutfragment作为容器。
Scaffold 以小部件（小部件） 的形式包含上述所有内容。

请记住，Flutter 拥有所有小部件。

Scaffold的内容构成如下图所示：它提供了展示左右侧布局的API，即DrawerLayout；在Android中，BottomBar是BottomNavigationView，应用程序栏是Toolbar。内容区域可以认为是上面提到的容器FrameLayout。 Flutter 中如何设计 Activity 界面?

由于Scaffold是材质部件的一部分，因此它需要一个材质应用程序（MaterialApp）作为其父容器。
我们将在下一篇文章中讨论MaterialApp的细节。现在让我们看看如何创建 Scaffold 小部件。 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
      ),
    ));
复制代码

运行上面的代码，你会看到一个白色的界面，因为我们没有在Scaffold中添加任何东西，我们通过属性backgroundColor：

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        //设置背景色为黄色  
        backgroundColor: Colors.yellowAccent,
      ),
    ));
复制代码

运行代码，之后运行时，屏幕上会出现黄色背景。

您可以尝试设置其他属性并使用热重载检查性能。您还可以在官方文档中查看 Scaffold 的所有功能。

现在您已经了解了如何创建脚手架，让我们一一探讨它的主要功能。

1.应用栏（工具栏）

应用栏上显示的小部件与我们在活动中使用的工具栏上的小部件相同。在下图中，您可以看到使用的语言方向是从左到右（例如英语），每个Appbar属性都出现在工具栏上相应的位置。 Flutter 中如何设计 Activity 界面?

  • leader：显示在标题前面的leader。该控件通常用于显示图标或后退按钮。
  • 标题：使用控件文本包裹工具栏标题。
  • 操作：这和我们使用menu.xml通过指定来显示菜单是一样的。 Actions 属性获取用于在应用程序栏中显示菜单的控件列表。这些控件通常是图标按钮。
  • bottom：bottom通常用于在应用程序栏下方显示TabBar。
  • flexibleSpace：该组件通常与 Appbar 一起使用，以创建 CollapsingToolbarLayout 效果。

您可以创建一个包含控件、标题和菜单的应用栏，如下所示： 

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('My Title'),
          actions: <Widget>[
            IconButton(
              color: Colors.white,
              icon: Icon(
                Icons.shopping_cart,
                color: Colors.white,
              ),
              onPressed: null,
            ),
            IconButton(
              icon: Icon(
                Icons.monetization_on,
                color: Colors.white,
              ),
              onPressed: null,
            )
          ],
        ),
      ),
    ));
复制代码

下图是上述代码的工作效果。它看起来与操作工具栏非常相似。 Flutter 中如何设计 Activity 界面?

您可以尝试添加或删除控件，或者为控件设置样式或颜色，或者探索应用栏的其他属性作为练习。

2.Body（其他视图的容器）

这是Scaffold的主要内容区域，可以作为fragment容器。它获取控件并显示它，这里我们向用户展示主要内容。
为简单起见，在本例中我们仅向正文添加红色背景。在实际使用中，这可以像单一背景颜色一样简单。您还可以添加ListView，Flutter 中如何设计 Activity 界面?

  • Row
，Column，etc❓等。 

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('My Title'),
          actions: <Widget>[
            IconButton(
              color: Colors.white,
              icon: Icon(
                Icons.shopping_cart,
                color: Colors.white,
              ),
              onPressed: null,
            ),
            IconButton(
              icon: Icon(
                Icons.monetization_on,
                color: Colors.white,
              ),
              onPressed: null,
            )
          ],
        ),
        body: Container(
          //设置红色背景  
          color: Colors.red,
        ),
      ),
    ));
复制代码
Flutter 中如何设计 Activity 界面?

主体属性显示在应用程序栏下方、浮动操作按钮和抽屉后面。尽管我们之前为脚手架分配了黄色背景，但红色背景覆盖了它。

3。抽屉（DrawerLayout）

这个控件代表Android中的DrawerLayout。它可以从 Activity 边缘水平滑动以显示应用程序的导航。 Flutter 中如何设计 Activity 界面?

Drawer 通常与 Scaffold.drawer 属性一起使用。就像在 Android 中一样，我们使用 NavigationView 插入 DrawerLayout，下表显示了可用于 Android 和 Flutter 抽屉的等效控件。

导航视图（Android）抽屉（颤动）
app：headerLayout =“@layout/nav_header”DrawerHeaderFlutter 中如何设计 Activity 界面?

DrawerHeader“视图”u。 列表tile

android:layout_gravity="start"使用Scaffold.drawer
android:layout_gravity="end"使用Scaffold.endDrawer属性，通常它的第一个子视图是Drawer的子视图。 control是一个DrawerHeader，用于显示当前用户的状态信息。抽屉中的其他子控件通常使用列表窗格构建。

以下代码展示了如何创建抽屉： 

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: AppBar(
          // leading: Icon(Icons.menu),  
          title: Text('My Title'),
          actions: <Widget>[
            IconButton(
              color: Colors.white,
              icon: Icon(
                Icons.shopping_cart,
                color: Colors.white,
              ),
              onPressed: null,
            ),
            IconButton(
              icon: Icon(
                Icons.monetization_on,
                color: Colors.white,
              ),
              onPressed: null,
            )
          ],
        ),
        body: Container(
          color: Colors.red,
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text("Drawer header"),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              Text("Item 1"),
              Text("Item 2"),
              Text("Item 3"),
              Text("Item 4"),
              Text("Item 5"),
              Text("Item 6"),
            ],
          ),
        ),
      ),
    ));
复制代码

上述代码的工作结果如下： Flutter 中如何设计 Activity 界面?

需要注意的是，在上面的代码中我们删除了应用栏控件图标。当我们将其添加到 Scaffold 抽屉时，它会自动在应用栏顶部添加一个汉堡包图标。

有关抽屉的更多信息，请参阅以下链接：

  • 将抽屉添加到屏幕
  • 设置导航抽屉

3。 BottomNavigationBar (BottomNavigationView)

BottomNavigationBar 是应用程序底部的屏幕。用于选择不同视图的材质控件（通常为 3-5 个）。底部导航栏包含许多项目，这些项目可以是悬停在材质布局上的文本、图标或两者。

底部导航栏通常与 Scaffold 一起使用，可以通过 Scaffold.bottomNavigationBar 属性提供。

在 Android 上，您可以通过 app:menu="@menu/my_navigation_items"♺ 设置 BottomNavigationView 菜单项。 my_navigation_items 包含所有菜单项的 标签列表。

在 Flutter 中，我们使用 items 属性，该属性接收 BottomNavigationBarItem 的列表。 BottomNavigationBarItem 包含菜单图标、标题和背景颜色。 

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: ....,
        body:...,
        drawer:...,
        bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text("Home"),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                title: Text("Search"),
              )
            ]
        ),
      ),
    ));
复制代码
Flutter 中如何设计 Activity 界面?

如您所见，是一个底部导航栏，底部有两个菜单。

处理点击事件和更改脚手架主体属性需要有状态的小部件和一些额外的工作，这超出了本文的范围。更多信息可以在官方文档中找到。

另外，我还给Scaffold添加了一个浮动按钮。

以下是使用Scaffold来显示我们的动作界面的完整代码。

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('My Title'),
          actions: <Widget>[
            IconButton(
              color: Colors.white,
              icon: Icon(
                Icons.shopping_cart,
                color: Colors.white,
              ),
              onPressed: null,
            ),
            IconButton(
              icon: Icon(
                Icons.monetization_on,
                color: Colors.white,
              ),
              onPressed: null,
            )
          ],
        ),
        body: Container(
          color: Colors.red,
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text("Drawer header"),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              Text("Item 1"),
              Text("Item 2"),
              Text("Item 3"),
              Text("Item 4"),
              Text("Item 5"),
              Text("Item 6"),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text("Home"),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                title: Text("Search"),
              )
            ]
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    ));
复制代码
Flutter 中如何设计 Activity 界面?

如果浮动按钮pressed回调值为null，则按钮不可用，不响应触摸事件。因此，要获得触摸效果，您需要处理 onPressed 回调 - 将函数保持为空或执行其他操作。

终于完成了文章开头想要创建的界面。

总结

Flutter 是一款快速创建高质量、美观界面的强大工具。它有许多部分可用于创建具有出色动画的灵活界面。脚手架就是其中之一，而这只是冰山一角。

作者：赵阿海
链接：https://juejin.im/post/5d72260af265da03986c153b
来源：版权：掘金商业转载请联系作者授权。非商业转载请注明出处。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：一个小型的 Flutter 开发示例将帮助您理解动画，动画 下一篇：Flutter Android端注册插件流程源码解析
相关文章

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白