以文字組合建立簡單的應用程式

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 事前準備

在這程式碼實驗室，您可以使用 Jetpack Compose 建立簡單的 Android 應用程式，並在螢幕上顯示生日訊息。

先決條件

  • 如何在 Android Studio 建立應用程式。
  • 如何在模擬器或 Android 裝置上執行應用程式。

課程內容

  • 如何編寫 Text、Column 和 Row 等可組合函式。
  • 如何在版面配置中顯示應用程式內的文字。
  • 如何設定文字格式，例如變更文字大小。

建構項目

  • 一個顯示生日祝福語的 Android 應用程式，成品見下方的螢幕截圖：

ca82241f560e8b99.png

軟硬體需求

  • 已安裝 Android Studio 的電腦

2. 觀看程式設計示範影片 (可略過)

如果您想觀看課程老師示範完成此程式碼研究室，請觀看以下影片。

建議您在全螢幕模式下觀看影片。只要點選影片播放器中的「全螢幕」圖示 這個符號特別凸顯矩形的四個角，是全螢幕模式的標示符號。，即可更清楚看到 Android Studio 的畫面和程式碼。

您可以跳過這個步驟，也可以不觀看這段影片，立即開始進行程式碼研究室的操作步驟。

3. 設定「生日快樂」應用程式

這任務中，您需要在 Android Studio 的「New Project」範本設定專案，並更改短信為個人化的生日祝福。

建立「Empty Compose Activity」專案

  1. 在「歡迎使用 Android Studio」對話方塊中，選擇「New Project」。
  2. 在「New Project」對話方塊中，選取「Empty Compose Activity」，然後按一下「Next」。
  3. 在「Name」欄位輸入 Happy Birthday，然後在「Minimum SDK」欄位中選擇最低 API 級別 24 (Nougat)，接著點選「Finish」。

6ecfe9ae1e5aa850.png

  1. 等待 Android Studio 建立專案檔案並建立專案。
  2. 按一下fd26b2e3c2870c3.png「Run 'app'」。

應用程式應顯示以下螢幕截圖的畫面：

c67f06ea2afef154.png

當您利用「Empty Compose Activity」範本建立這個 Happy Birthday 應用程式時，Android Studio 會設定基本 Android 應用程式所需的各項資源，包括畫面上顯示的「Hello Android！」訊息。在這程式碼研究室，您可以瞭解如何建立訊息、變更文字為生日祝福語，以及新增及設定額外訊息的格式。

什麼是使用者介面 (UI)？

應用程式的使用者介面 (UI) 是指畫面顯示的內容，包括文字、圖片、按鈕和其他多種元素，以及這些元素在畫面上呈現的方式。應用程式可透過 UI 向使用者顯示不同的內容，並提供互動的機制。

這個圖片包含可點擊的按鈕、訊息和文字輸入欄位，可供使用者輸入資料。

e5abb8ad9f9ae2a7.png

可點擊的按鈕

fded30871a8e0eca.png

訊息

aafb9c476f72d558.png

文字輸入欄位

這些元素都稱為 UI 元件。應用程式畫面上顯示的內容幾乎都是 UI 元素，也稱為 UI 元件。這些內容可以是互動元素 (例如可點選的按鈕或可編輯的輸入欄位)，也可以是裝飾性圖片。

您可以試著找找看下方的應用程式中有多少 UI 元件。

在本程式碼研究室中，您將使用一種用於顯示文字的 UI 元素，也就是「Text」元素。

4. 什麼是 Jetpack Compose？

Jetpack Compose 是一種現代化的工具組，可用於建立 Android UI。Compose 提供簡單的程式碼、強大的工具和直覺式 Kotlin 功能，簡化並加快 Android 開發 UI 的流程。透過 Compose，您可以定義一組函式 (稱為可組合函式) 建構 UI，這些函式會接收資料並輸出 UI 元素。

可組合函式

可組合函式是 Compose 使用者介面的基本構成要素。可組合函式：

  • 說明 UI 的某些部分。
  • 不傳回任何值。
  • 輸入及產生螢幕上顯示的內容。
  • 可能會產生多個 UI 元素。

備註

註解是用來在程式碼中附加額外資訊。這些資訊可協助 Jetpack Compose 編譯器等工具和其他開發人員瞭解應用程式的程式碼。

如要使用註解，請在需要加上註解的宣告開頭為其名稱 (註解) 加入 @ 前置字元。您可以針對屬性、函式、類型等程式碼元素加上註解。本課程稍後會介紹各種類型。

下圖為註解函式範例：

前置字元為 @，註解為可組合項，接著是函式宣告

以下程式碼片段包含已加註屬性的範例。您會在接下來的程式碼研究室中使用這些功能。

// Example code, do not copy it over

@Json
val imgSrcUrl: String

@Volatile
private var INSTANCE: AppDatabase? = null

含有參數的註解

註解可以接受參數，參數則可為處理參數的工具提供更多資訊。下方列舉了一些含有及不含參數的 @Preview 註解。

15169d39d744c179.png

缺少參數的註解

992de02d7b5dbfda.png

註解預覽背景

fbc159107d248a84.png

含有預覽標題的註解

您也可以將多個參數傳送至註解，如下所示。

510f8443a174f972.png

含有預覽標題和系統 UI 的註解 (手機螢幕)

Jetpack Compose 有各式各樣的內建註解，目前為止，本課程中已出現過 @Composable 和 @Preview 註解。在本課程後面的部分，您將瞭解更多註解及其用途。

可組合函式範例

可組合函式會以 @Composable 註解加上註解。所有可編譯的函式都必須含有此註解。此註解會告知 Compose 編譯器，此函式是用來將資料轉換為 UI。提醒您，編譯器是一種特殊程式，會擷取並逐行檢視您編寫的程式碼，然後轉譯成電腦能理解的內容 (機器語言)。

這個程式碼片段是簡單的可組合函式範例，該函式會傳送資料 (name 函式參數)，並用於在螢幕上顯示文字元素。

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

可組合函式的注意事項：

  • 可組合函式可接受參數，讓應用程式邏輯描述或修改 UI。在這種情況下，您的 UI 元素會接受 String，以便在歡迎畫面中顯示使用者名稱。
  • 函式不會傳回任何內容。輸出 UI 的可組合函式無需傳回任何內容，因為這些函式的功用是描述所需的畫面狀態，而非建構 UI 元素。換句話說，可組合函式只會描述 UI，不會建構或建立 UI，因此不會傳回任何內容。

請注意程式碼中的可組合函式

  1. 在 Android Studio 中開啟 MainActivity.kt 檔案。
  2. 捲動至 DefaultPreview() 函式並刪除。新增可組合函式 BirthdayCardPreview()，以便預覽 Greeting() 函式，如下所示。建議您一律為函式命名或重新命名，以描述其功能。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

可組合函式可以呼叫其他可組合函式。在這個程式碼片段中，預覽函式會呼叫 Greeting() 可組合函式。

請注意，前一個函式還包含 @Preview 註解，且在 @Composable 註解之前設有參數。如要進一步瞭解本課程傳送到 @Preview 註解的引數，請參閱這篇文章。

可組合函式名稱

不傳回任何結果的 Compose 函式，且該可提供 @Composable 註解，請使用 Palcal 大小寫命名。帕斯卡爾字母是指命名慣例中，每個詞的首字母大寫。「Pascal」和「l」的大小寫不同，則「大寫字母」中的所有字詞皆是大寫。使用 came 首字母大寫時，第一個字詞不會大寫。

Compose 函式：

  • 必須為名詞：DoneButton()
  • 不是動詞或動詞：DrawTextField()
  • 未表示名詞：TextFieldWithLink()
  • 不是形容詞：Bright()
  • 非副詞：Outside()
  • 名詞 MAY 的前置字元是以描述性為形容詞：RoundIcon()

此規範適用於函式是否觸發 UI 元素。詳情請參閱可命名的函式。

範例程式碼請勿複製

// Do: This function is a descriptive PascalCased noun as a visual UI element
@Composable
fun FancyButton(text: String) {}

// Do: This function is a descriptive PascalCased noun as a non-visual element
// with presence in the composition
@Composable
fun BackButtonHandler() {}

// Don't: This function is a noun but is not PascalCased!
@Composable
fun fancyButton(text: String) {}

// Don't: This function is PascalCased but is not a noun!
@Composable
fun RenderFancyButton(text: String) {}

// Don't: This function is neither PascalCased nor a noun!
@Composable
fun drawProfileImage(image: ImageAsset) {}

5. Android Studio 中的設計窗格

Android Studio 可讓您在 IDE 中預覽可組合的功能，而不必將應用程式安裝至 Android 裝置或模擬器。如同先前課程所述，您可以在 Android Studio 的「Design」窗格中預覽應用程式的外觀。

c284448a820d577c.png

可組合函式必須支援任何參數的預設值，才能進行預覽。因此，您無法直接預覽 Greeting() 函式。相反地，您必須新增另一個函式 (此例中為 BirthdayCardPreview() 函式)，再由該函式使用適當的參數呼叫 Greeting() 函式。

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

如何查看預覽畫面：

  1. 建立程式碼

預覽畫面會自動更新。

如要更新或重新整理預覽畫面，您也可以在「Design」窗格中點選「Build & Refresh」圖示 fdd133641cfac2b3.png。

5cec5263ba04ea1.png

  1. 在 BirthdayCardPreview() 函式中，將 Greeting() 函式中的 "Android" 引數變更為您的姓名。
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}
  1. 在「Design」窗格中按一下 fdd133641cfac2b3.png‎「Build & Refresh」。

您應該會看到更新後的預覽畫面。

4c1634ec586ca3ba.png

6. 新增文字元素

在這項工作中，您將移除 Hello $name! 問候語，並新增生日問候語。

新增可組合函式

  1. 在 MainActivity.kt 檔案中，刪除 Greeting() 函式定義。在本程式碼研究室的後續部分，您將自行新增用於顯示問候語的函式。
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
  1. 將滑鼠游標懸停在 Greeting() 函式上。您會看到 Android Studio 醒目顯示 Greeting() 函式呼叫，請將游標懸停在這個函式呼叫上，確認出現的錯誤為何。

46fed08f63f1b3c6.png

  1. 從 onCreate() 和 BirthdayCardPreview() 函式中刪除 Greeting() 函式呼叫及其引數。您的 MainActivity.kt 檔案看起來會像這樣：
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview(){
    HappyBirthdayTheme {
    }
}
  1. 在 BirthdayCardPreview() 函式之前，新增名為 BirthdayGreetingWithText() 的函式。別忘了在函式之前加上 @Composable 註解，因為這是會輸出 Text 可組合函式的 Compose 函式。
@Composable
fun BirthdayGreetingWithText() {
}
  1. 最佳做法是讓可組合函式接受 Modifier 參數，並將該 modifier 傳遞給其輸出 UI 的第一個子項。在後續工作和程式碼研究室中，您將進一步瞭解 Modifier 和子元素。現在，請在 BirthdayGreetingWithText() 函式中新增 Modifier 參數。
@Composable
fun BirthdayGreetingWithText(modifier: Modifier = Modifier) {
}
  1. 在 BirthdayGreetingWithText() 可組合函式中，加入 String 類型的 message 參數。
@Composable
fun BirthdayGreetingWithText(message: String, modifier: Modifier = Modifier) {
}
  1. 在 BirthdayGreetingWithText() 函式中，新增 Text 可組合式文字訊息，做為命名的引數。
@Composable
fun BirthdayGreetingWithText(message: String, modifier: Modifier = Modifier) {
    Text(
       text = message
    )
}

這個 BirthdayGreetingWithText() 函式會在 UI 中顯示文字。方法是呼叫 Text() 可組合函式。

預覽函式

在這項工作中，您將在「Design」窗格中預覽 BirthdayGreetingWithText() 函式。

  1. 呼叫 BirthdayCardPreview() 函式中的 BirthdayGreetingWithText() 函式。
  2. 將 String 引數傳遞至 BirthdayGreetingWithText() 函式 (向好友發出的生日問候語)。您可以視需要自訂名稱，例如 "Happy Birthday Sam!"。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!")
    }
}
  1. 在「Design」窗格中，按一下「Build & Refresh」圖示 ea3433426a37f49b.png，然後等待建構完成，即可預覽您的函式。

eadbd65191fd4632.png

7. 變更字型大小

您已將文字新增至使用者介面，但似乎還沒有最終應用程式。在這項工作中，您會瞭解如何變更大小、文字顏色和其他影響文字元素外觀的屬性。您也可以嘗試不同的字型大小和顏色。

可縮放像素

可縮放像素 (SP) 是字型大小的測量單位。Android 應用程式中的 UI 元素會採用兩種度量單位：密度獨立像素 (DP)，您稍後將用於版面配置和可擴充像素 (SP)。根據預設，SP 單位的大小與 DP 單位相同，但系統會根據手機設定中偏好的文字大小調整其大小。

  1. 在 MainActivity.kt 檔案中，捲動至 BirthdayGreetingWithText() 函式中的 Text() 組合。
  2. 將 fontSize 引數做為第二個已命名的引數傳遞給 Text() 函式，並將其值設為 36.sp。
Text(
   text = message,
   fontSize = 36.sp
)

Android Studio 會醒目顯示 .sp 程式碼，因為您需要匯入某些類別或屬性來編譯應用程式。

6b6e60b13e085a13.png

  1. 按一下「Android Studio」醒目顯示的 .sp。
  2. 按一下彈出式視窗中的「Import」，即可匯入 androidx.compose.ui.unit.sp 以使用 .sp 擴充功能屬性。

a1a623c584e7e6dc.png

  1. 捲動至檔案頂端，接著就會看到 import 陳述式。此處應會出現 import androidx.compose.ui.unit.sp 陳述式，代表 Android Studio 已將相應套件加入您的檔案。

80ae3819ddfc7306.png

  1. 在「Design」窗格中按一下「Build & Refresh」，即可查看更新後的預覽畫面。請注意問候語預覽畫面的字型大小變更。

顯示「Build & Refresh」選項

你現在可以測試不同的字型大小。

8. 新增其他文字元素

您在先前的工作中，新加入的祝賀訊息已傳送給好友。在這項工作中，您必須以姓名簽署卡片。

  1. 在 MainActivity.kt 檔案中，捲動至 BirthdayGreetingWithText() 函式。
  2. 將函式傳送至 String 類型的 from 參數以做為簽名。
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)
  1. 在生日訊息 Text 可組合項之後，請新增另一個 Text 可組合項，可接受設為 from 值的 text 引數。
Text(
   text = from
)
  1. 新增 fontSize 已命名引數集，並將值設為 24.sp。
Text(
   text = from,
   fontSize = 24.sp
)
  1. 捲動至 BirthdayCardPreview() 函式。
  2. 新增其他 String 引數來簽署卡片，例如 "- from Emma"。
BirthdayGreetingWithText(message = "Happy Birthday Sam!", from ="- from Emma")
  1. 按一下「Design」窗格中的「Build & Refresh」。
  2. 注意看預覽畫面。

c59bb2754ab5db49.png

可組合函式可能會輸出多個 UI 元素。不過，如果您沒有提供如何排列這些元素的指示，Compose 可能會以您偏好的方式排列元素。舉例來說，先前的程式碼會產生兩個相互重疊的文字元素，因為對於如何安排兩種組合，沒有相關指示。

後續工作將讓您學習如何在資料列和資料欄中排列合成項目。

9. 排列資料列和欄中的文字元素

UI 階層

UI 階層結構是以隔離模式為基礎，代表一個元件可包含一或多個元件，我們有時會用「父項」和「子項」這些字詞描述元件之間的關係。意思是指，父項 UI 元素含有子項 UI 元素，而這些子項 UI 元素還能含有其他子項 UI 元素。在本節中，您將瞭解可做為父項 UI 元素的 Column、Row 和 Box 可組合函式。

9270b7e10f954dcb.png

Compose 有三個基本的標準版面配置元素，分別是 Column、Row 和 Box 可組合函式。下一個程式碼研究室會詳細介紹 Box 元件。

畫面上有三個垂直排列的元素，一列顯示三個排列的元素

Column、Row 和 Box 是可組合函式，會將可組合內容當成引數，因此您可以將項目放在這些版面配置元素中。舉例來說，Row 組合中的每個子元素會水平並排放置。

// Don't copy.
Row {
    Text("First Column")
    Text("Second Column")
}

在這張圖片中，這些文字元素會在螢幕上的相鄰顯示。

藍色框線僅為示意用，不會實際顯示。

6f74a11c03564a61.png

結尾的 lambda 語法

請注意，在先前的程式碼片段中，大括號使用大括號，而不是 Row 可組合函式中的括號。這就是「Trailing Lambda 語法」。本課程稍後會詳細介紹 lambda 和結尾的 lambda 語法。現在，您只需要熟悉這個常用的 Compose 語法即可。

Kotlin 的特殊語法可以在最後一個參數是函數時，將函式做為參數傳遞給函式。

函式參數是最後一個參數

如要將函式做為參數傳遞，您可以使用結尾的 lambda 語法。這個語法不是將函式主體連同函式名稱一起置於括號 ({}) 中，而是將括號和函式主體放在函式名稱後方。這是 Compose 中的一種常見做法，因此您需要熟悉這類程式碼的格式。

舉例來說，Row() 可組合函式中的最後一個參數是 content 參數，該函式會輸出子項 UI 元素。假設您想建立一個包含三個文字元素的資料列。以下程式碼雖然可用，但十分冗長：

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

由於 content 參數是函式簽章中的最後一個參數，而且您要將其值做為 lambda 運算式傳遞 (目前即使您不知道 lambda 是什麼也沒關係，只要熟悉語法即可)，因此您可以移除 content 參數和括號，如下所示：

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

將文字元素排成一列

在這項工作中，您會妥善地排列應用程式中的文字元素，以免重疊。

  1. 在 MainActivity.kt 檔案中，捲動至 BirthdayGreetingWithText() 函式。
  2. 在文字元素周圍加上 Row 可組合項，使資料欄顯示兩個文字元素。

現在，函式看起來應該會像這樣：

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)  {
    Row{
        Text(
            text = message,
            fontSize = 36.sp,
       )
        Text(
            text = from,
            fontSize = 24.sp,
       )
   }
}
  1. 在醒目顯示的程式碼片段中按一下 Row。
  2. 請注意，Android Studio 提供多種 Row 匯入選項。
  3. 按一下「Import」。

資料列函式醒目顯示兩個彈出式視窗，分別顯示未解決的錯誤

  1. 在 androidx.compose.foundation.layout 套件中選取開頭為 Row(androidx.compose.ui.Modifier, androidx.compose.foundation.layout.Argument.Horizontal, androidx.... 的函式

dfad9fcfae49aa7a.png

  1. 按一下「Build & Refresh」即可更新「Design」窗格中的預覽畫面。

彼此相鄰的生日問候語和簽名。

現在沒有重疊時，預覽畫面會看起來更好。不過，由於簽名空間不足，所以這不是必要步驟。在下一個工作中，您可以安排資料欄中的文字元素來解決這個問題。

排列一欄中的文字元素

在這項工作中，您可以變更 BirthdayGreetingWithText() 函式來排列資料欄內的文字元素。完成後，別忘了按一下「Build & Refresh」更新預覽畫面。更新後的畫面如以下螢幕截圖所示：

生日問候語和簽名會顯示在一個欄中的一欄。

您已經自行嘗試檢查程式碼，現在可以透過此程式碼段裡的解決方案程式碼來檢查您自己的程式碼：

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

當 Android Studio 出現提示時，請匯入這個套件：

import androidx.compose.foundation.layout.Column
  1. 提醒您，您需要將修飾符參數傳遞至可組合函式中的子元素。也就是說，您需要將修飾符參數傳遞至 Column 可組合函式。
@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

10. 裝置上顯示

如果對預覽感到滿意，就可以開始在裝置或模擬器上執行應用程式。

  1. 在 MainActivity.kt 檔案中，捲動至 onCreate() 函式。
  2. 從 Surface 區塊呼叫 BirthdayGreetingWithText() 函式。
  3. 傳送 BirthdayGreetingWithText() 函式，以及您的生日問候語和簽名。

完成的 onCreate() 函式應會如下所示：

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}
  1. 在模擬器上建構並執行應用程式。

ca82241f560e8b99.png

11. 取得解決方案程式碼

已完成的MainActivity.kt：

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}

@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
   HappyBirthdayTheme {
       BirthdayGreetingWithText(message = "Happy Birthday Sam!", from ="- from Emma")
   }
}

12. 結語

您已建立「生日快樂」應用程式。

在接下來的程式碼研究室中，您可以為應用程式新增圖片，然後調整文字元素的對齊方式，藉此美化文字。

摘要

  • Jetpack Compose 是用於建立 Android UI 的新型工具包。Jetpack Compose 能以更簡單的程式碼、強大的工具和符合直覺的 Kotlin API，簡化並加快 Android 上的 UI 開發作業。
  • 應用程式的使用者介面 (UI) 是指畫面顯示的內容，包括文字、圖片、按鈕和其他多種元素。
  • 可組合函式是 Compose 的基本構成要素。可組合函式可用於說明 UI 的部分內容。
  • 可組合函式會以 @Composable 註解加註；此註解會告知 Compose 編譯器，此函式是用來將資料轉換為 UI。
  • Compose 中的三個基本標準版面配置元素為 Column、Row, 和 Box。這些是可組合函式，可以接受可組合內容，讓您在函式中加入需要的項目。例如，Row 中的每個子項都可以相鄰放置。

瞭解詳情