[譯]在 Flutter 中如何設計 Activity 介面?

趙阿海發表於2019-09-06

原文作者：Burhanuddin Rashid，Google 認證 Android 開發者

原文連結：Flutter For Android Developers : How to design Activity UI in Flutter.

本文連結：wenhaiz.github.io/how-to-desi…

這篇部落格是為那些想把現有的開發知識應用 Flutter 的 Android 開發者寫的。在這篇文章裡，我們將會探索在 Flutter 裡與 Activity 對應的是什麼。

部落格系列

在 Flutter 中如何設計 Activity 介面 (本篇)
在 Flutter 中如何設計 LinearLayout
在 Flutter 中如何設計 FrameLayout

先決條件

這篇文章假設你已經在電腦上配置好了 Flutter 的執行環境並且能成功執行一個 Hello World 專案。如果你還沒有安裝 Flutter，你可以從這裡開始。

Dart 是一門基於物件導向的語言，對一個 Android 開發者來說是很容易掌握的。

目標

在這篇文章結束時，我們將使用 Flutter 建立一個如下圖所示的 Activity 佈局。

技術上來說，如果你研究過 Flutter 生成的 Android 專案並且檢視過它的 AndroidMenifest.xml 檔案，你會發現它只執行了一個 Activity，比如 FlutterActivity，但這篇文章要探討的問題是，在 Flutter 裡如何設計一個 Activity 的介面？
答案是...Scaffold。

Scaffold

Scaffold 是一個表示 Activity 介面的小部件。作為 Android 開發者，我們使用 Activity 來表示一屏內容，它可以包括頂部工具欄(Toolbar)、選單(Menus)、側滑選單(Drawer)、底部導航欄(BottomNavigationBar)、底部提示(SnackBar)、懸浮按鈕(FloatActionButton)等，我們還會用一個FrameLayout作為Fragment的容器。
Scaffold 以部件(Widgets)的形式包含了上述所有內容。

記住，在 Flutter 裡，一切皆部件(Widget)。

下面這張圖片展示了 Scaffold 的內容組成：它提供了用於展示左右兩側佈局的 API，即DrawerLayout;BottomBar 就是 Android 中的 BottomNavigationView，App bar 就是 Toolbar，我們可以把 Content area 當做上面說的FrameLayout容器。

由於 Scaffold 是材料部件(Material Widgets)的一部分，因此它需要一個材料App(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,
      ),
    ));
複製程式碼

執行程式碼後你就能看到螢幕上出現黃色的背景了。

你可以試著設定其他屬性並通過熱過載（Hot Reload）來檢視執行結果，你也可以在官方文件檢視Scaffold的所有屬性。

現在你知道如何建立一個 Scaffold 了，我們接下來將會一個一個的探索它的主要屬性。

1.Appbar(Toolbar)

Appbar 展示的部件和我們在 Activity 中使用的 Toolbar 是相同的，下面的圖展示了在所用的語言方向是從左到右(例如英語)時，Appbar 的每個屬性出現在工具欄的對應位置。

leading:展示在標題之前的控制元件，這個控制元件通常用來展示圖示或者後退按鈕。
title:用一個 Text 控制元件來包裹 Toolbar 的標題。
actions:這和我們使用 menu.xml 通過定義<item/>來展示選單是一樣的，actions 屬性接收一個控制元件列表來在 Appbar 上展示選單，這些控制元件通常是 IconButton。
bottom:bottom 通常用於在 Appbar 下面展示一個 TabBar。
flexibleSpace: 這個部件通常用於配合 Appbar 建立 CollapsingToolbarLayout 效果。

你可以像下面這樣建立一個包含leading、title 和 menus 的 Appbar：

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,
            )
          ],
        ),
      ),
    ));
複製程式碼

下圖就是上面程式碼的執行效果，它看起來和 Activity 的 Toolbar非常像。

你可以試著增刪控制元件，或者為控制元件提供一個樣式或顏色，也可以把探索 Appbar 的其他屬性作為一個練習。

2.Body (其他 View 的容器)

這是 Scaffold 的主要內容區域，可以充當 Fragment 的容器。它接收一個控制元件並把它展示出來，這就是我們向使用者展示主要內容的地方。
為了簡單起見，在這個例子中我們只為 body 新增一個紅色背景。在實際使用中，可不止一個背景顏色這麼簡單，還可以新增 ListView、Row、Column、Stack等。

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,
        ),
      ),
    ));
複製程式碼

Body 的屬性展示在 Appbar 下方，並且在 floatingActionButton 和 drawer 後面。雖然我們之前給 Scaffold 定義了一個黃色的背景，但是紅色背景會覆蓋它。

3. Drawer (DrawerLayout)

這個控制元件代表 Android 中的 DrawerLayout,它可以從 Activity 邊緣水平滑入，來展示應用的導航。

Drawer 通常與 Scaffold.drawer屬性一起使用。就像在 Android 裡我們用NavigationView 填充 DrawerLayout一樣，下面的表格展示了在 Android 和 Flutter 中可以用於 Drawer 的等價控制元件。

NavigationView(Android)	Drawer(Flutter)
app:headerLayout="@layout/nav_header"	DrawerHeader
app:menu="@menu/drawer_view"	ListTile
android:layout_gravity="start"	Use Scaffold.drawer property
android:layout_gravity="end"	Use Scaffold.endDrawer property

Drawer 的子控制元件通常是一個ListView,它的第一個子控制元件是DrawerHeader，用來展示當前使用者的狀態資訊。Drawer的其他子控制元件通常使用ListTile來構造。

下面的程式碼展示瞭如何建立一個Drawer：

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"),
            ],
          ),
        ),
      ),
    ));
複製程式碼

上面程式碼的執行結果如下圖所示：

需要注意一點，上面的程式碼中我們去掉了 appBar 的 leading 圖示，當我們給 Scaffold 新增 drawer 時，它會自動在 appbar 的 leading 上新增一個漢堡圖示。

關於 drawer 的更多細節可以檢視下面的連結：

3.BottomNavigationBar (BottomNavigationView)

BottomNavigationBar 是一個展示在應用底部，用於選擇不同檢視（通常3-5個）的材料控制元件。底部導航欄包括很多項，可以是浮在材料佈局上的文字、圖示或者兩者都有。

底部導航欄通常和 Scaffold 一起使用，可以通過 Scaffold.bottomNavigationBar 屬性提供。

在 Android 裡，你通過app:menu=”@menu/my_navigation_items”來定義 BottomNavigationView的選單項。my_navigation_items 包括所有選單項的<item/>標籤列表。

在 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"),
              )
            ]
        ),
      ),
    ));
複製程式碼

如你所見，底部有一個包含兩個選單的 BottomNavigationBar。

處理點選事件和改變 Scaffold 的 body 屬性需要一個帶狀態的部件(Stateful widget)和一些額外的工作，已經超出了這篇文章的範疇，你可以在官方文件裡瞭解更多。

此外，我還給 Scaffold 新增了一個懸浮按鈕。

下面是使用 Scaffold 展示我們Activity 介面的完整程式碼。

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),
        ),
      ),
    ));
複製程式碼

如果懸浮按鈕的onPressed回撥是null,那麼按鈕將會不可用並且不響應觸控事件。所以為了有觸控效果，你需要處理onPressed回撥——保持空函式或者執行其他操作。

最終，我們完成了在文章開始要構建的介面。

總結

Flutter 是一個可以快速構建高質量、美觀介面的強大工具，它有很多部件可以用於構建具有很棒動畫的靈活介面，Scaffold 是其中的一個並且它只是冰山一角。
我希望在接下來的部落格中能探討關於它們的更多話題。

感謝！

[譯]在 Flutter 中如何設計線性佈局?
2019-09-22
Flutter
[譯] 如何在 Flutter 中設計 LinearLayout？
2018-07-06
Flutter
【譯】Dart/Flutter中的非同步程式設計
2020-05-24
DartFlutter非同步程式設計
[譯] UX 設計實踐：如何設計可掃描的 Web 介面
2019-01-08
UXWeb
Flutter中如何進行介面跳轉
2021-03-28
Flutter
設計中如何使介面更加飽滿？
2018-09-15
如何決定介面設計中顏色
2018-10-07
Android中Activity設計思想個人理解
2020-05-23
Android
[譯] 在 Flutter 中實現微光閃爍效果
2019-03-04
Flutter
[譯]在 Flutter 中解析複雜的 JSON
2018-07-29
FlutterJSON
在網頁設計中如何排版
2018-08-13
網頁
[譯] 設計 QA 在應用程式設計中的重要性
2019-02-26
程式設計
[譯] 在中國使用 Flutter
2019-03-04
Flutter
如何在介面設計中“色”誘使用者
2015-08-31
[Flutter翻譯]Flutter中的剪下
2020-07-23
Flutter
[Flutter翻譯]我們如何建設我們的Flutter團隊
2020-07-12
Flutter
在介面測試中如何加密 token
2020-12-24
加密
設計師教你如何在介面設計中“色”誘你的使用者
2015-08-30
[譯] 如果介面產品設計師設計實體產品
2019-02-28
Flutter與Android的混合開發（3）Flutter如何跳轉到Activity，如何傳值
2019-09-05
FlutterAndroid
[譯] 原子設計：如何設計元件系統
2017-07-26
元件
如何設計高併發介面？
2019-01-20
介面設計中的“黑暗模式”
2013-09-02
模式
介面設計中如何增強CTA按鈕召喚力？
2018-03-27
如何招聘程式設計師（譯）
2012-04-06
程式設計師
【譯】Arc 在 Rust 中是如何工作的
2020-11-19
Rust
多型引擎如何工作在病毒中（譯）
2015-11-15
多型
[譯] 為 JavaScript 程式設計師準備的 Flutter 指南
2018-04-04
JavaScript程式設計師Flutter
[Go語言寫介面]三、使用介面設計器設計視窗，在程式碼中呼叫，背景編輯器的使用
2022-08-27
Go
生活中的介面設計｜報稅篇
2016-06-11
如何設計出“好看”的UI介面（二）：4個步驟，搞定介面設計
2020-02-06
UI
在 Flutter 中探索 StreamBuilder
2021-09-01
FlutterUI
【譯】Flutter中的花式背景動畫
2020-01-14
Flutter動畫
【譯】Flutter 2.2中的新功能
2021-05-20
Flutter
[譯] 如何簡化你的設計
2019-04-22
在iOS專案中依賴Flutter Module-③本地podspec中轉依賴遠端Flutter編譯產物
2021-08-17
iOSFlutter編譯
[譯] 在 React Hooks 中如何請求資料？
2019-03-25
ReactHook
[譯] Flutter 非同步程式設計：Future、Isolate 和事件迴圈
2019-03-13
Flutter非同步程式設計事件