Jetpack?Compose?分步指南教程詳解

更新時間：2022年11月18日 14:05:01 作者：Admin?MindOrks

這篇文章主要為大家介紹了Jetpack?Compose?分步指南教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在本章節(jié)中，我們將學習 Jetpack Compose，這是一個用于構(gòu)建原生 UI 的現(xiàn)代工具包。

通過這個完整的教程，我們將學習如何使用 Text、TextField、Preview、Column、Row、Button、Card、AlertDialog、MaterialDesign 元素等。因此，事不宜遲，讓我們開始創(chuàng)建一個 Jetpack Compose 項目。因此，本章節(jié)是關(guān)于通過示例學習適用于 Android 的 Jetpack Compose。

注意：要使用 Jetpack Compose，您需要擁有最新的 Canary 版本的 Android Studio 4.2。因此，您可以轉(zhuǎn)到Android Studio 預覽頁面并下載最新的 Canary 版本，然后創(chuàng)建一個 Empty Compose Activity。

可組合函數(shù)

在 Jetpack Compose 中，可組合函數(shù)用于以編程方式定義應用程序的所有 UI。因此，您無需為應用程序的布局使用任何 XML 文件。制作可組合函數(shù)所需要做的就是使用@Composable函數(shù)名稱的注釋?？山M合函數(shù)的基本語法是：

@Composable
fun AnyUiComponent() {
    // Code for UI element
}

現(xiàn)在，您知道了可組合函數(shù)是什么以及如何使用@Composable注解創(chuàng)建可組合函數(shù)。讓我們繼續(xù)看Text的例子。

顯示簡單文本

在本章的這一部分中，我們將學習如何使用 compose 顯示簡單的文本。

要顯示文本，我們使用 Text Composable 并在其中傳遞要顯示的字符串。例如，

@Composable
fun SimpleText(displayText: String) {
    Text(text = displayText)
}

在這里，SimpleText是一個可組合函數(shù)，在該函數(shù)內(nèi)部，我們正在使用Text并傳遞displayText給它。

現(xiàn)在，您可以從活動方法的塊中調(diào)用此SimpleText函數(shù)。setContentonCreate

class SimpleTextActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                SimpleText(getString("I am learning Compose"))
            }
        }
    }
}

在這里，我們使用一個Column用于垂直顯示某些內(nèi)容的 Column，我們正在調(diào)用SimpleTextComposable 函數(shù)。

將樣式應用于文本

我們可以將各種樣式應用于文本，例如增加字體大小、更改顏色等。

因此，讓我們創(chuàng)建一個名為的函數(shù)SetTextStyling：

@Composable
fun SetTextStyling(displayText: String, style: TextStyle? = null, maxLines: Int? = null) {
    Text(
        text = displayText,
        modifier = Modifier.padding(16.dp),
        style = style ?: TextStyle.Default,
        overflow = TextOverflow.Ellipsis,
        maxLines = maxLines ?: Int.MAX_VALUE
    )
}

在上面的函數(shù)中，參數(shù)是displayText即要顯示的文本，style即要放在Text 上的樣式，maxLines即文本允許的最大行數(shù)。如果文本超過最大行，則將顯示省略號（...）。

我們將通過傳遞這些參數(shù)來調(diào)用這個函數(shù)。讓我們看看其中的一些：

設(shè)置字體大?。?/li>

style = TextStyle(
    fontSize = 24.sp
)

要設(shè)置字體粗細，請將 text-style 傳遞為：

fontWeight = FontWeight.Bold

同樣，您可以更改字體大小、文本顏色、字體系列、下劃線文本等。您可以從我們的開源項目中看到所有這些。

使用 TextField 進行輸入

就像 EditText 一樣，在 Compose 中我們可以使用TextField和BaseTextField。BaseTextField仍處于試驗階段，可以隨時刪除或永久添加。因此，要使用BaseTextField，您需要添加@ExperimentalFoundationApi注釋。

下面是一個簡單的例子BaseTextField：

@ExperimentalFoundationApi
@Composable
fun SimpleTextFieldComponent() {
    Surface(color = Color.LightGray, modifier = Modifier.padding(16.dp)) {
        var text by remember { mutableStateOf(TextFieldValue("Enter text here")) }
        BaseTextField(
            value = text,
            modifier = Modifier.padding(16.dp).fillMaxWidth(),
            onValueChange = {
                text = it
            }
        )
    }
}

在上面的函數(shù)中，我們有一個BaseTextFieldinside a Surface。我們有一個名為的回調(diào)onValueChange。當的輸入發(fā)生一些變化時調(diào)用此回調(diào)，BaseTextField并且更新的文本將作為回調(diào)的參數(shù)出現(xiàn)。

這是一個例子BaseTextField。Material Design 還為 EditText 提供了一個 Composable，即TextField. 一個簡單的實現(xiàn)TextField如下：

@Composable
fun SimpleMaterialTextFieldComponent() {
    var text by savedInstanceState { "" }
    TextField(
        value = text,
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

TextField的行為類似于BaseTextField。在這里TextField，你還有一件事，即label。標簽是在TextField中沒有文本時顯示在中的文本TextField。

我們可以通過向它傳遞各種參數(shù)來自定義這個 BaseTextField 和 TextField。例如，

僅顯示數(shù)字鍵盤：

var text by remember { mutableStateOf(TextFieldValue("0123")) }
BaseTextField(value = text,
    keyboardType = KeyboardType.Number,
    onValueChange = {
        text = it
    }
)

將密碼作為輸入：

keyboardType = KeyboardType.Password,
visualTransformation = PasswordVisualTransformation()

在 TextField 中添加占位符（當 TextField 為空且有焦點時顯示）

placeholder = { Text("MindOrks") }

同樣，我們可以添加圖標，在 TextFiled 中顯示錯誤消息，設(shè)置 errorColor、backgroundColor、intractionState、activeColor、inactiveColor 等。您可以在我們的開源項目中找到這些。

您可以嘗試這些并在 Android Studio 本身中查看輸出。是的，你沒聽錯。您可以在 Android Studion 本身中預覽任何 UI 元素。讓我們看看如何。

在 Android Studio 中預覽

Android Studio 提供了一個很棒的功能，可以在工作室本身中預覽您的 UI 組件，而且非常動態(tài)。因此，每當您想測試一些 UI 組件時，您都可以通過制作 Composable 函數(shù)并使用@Preview注解在 Android Studio 中簡單地預覽它。

以下是相同的示例：

// This is a Composable function to display a Text
@Composable
fun SimpleText(displayText: String) {
    Text(text = displayText)
}
@Preview
@Composable
fun SimpleTextPreview() {
    SimpleText("Hi I am learning Compose")
}

現(xiàn)在，在預覽選項卡（Studio 的右側(cè)）中，您可以看到上述 Composable 函數(shù)的預覽。

您可以使用不同寬度和高度的任意數(shù)量的預覽。如果您單擊預覽中的任何 UI 元素，Android Studio 會將您帶到創(chuàng)建該 UI 的行。

此外，您可以使用參數(shù)將一些名稱放入預覽中name。要命名預覽，您需要添加以下代碼：

@Preview(name = "Named Preview")

默認情況下，預覽的名稱是函數(shù)的名稱。

注意：您不能將任何參數(shù)傳遞給 Preview Composable 函數(shù)。

預覽參數(shù)

在上一節(jié)中，我們學習了如何使用 Android Studio 的預覽功能?，F(xiàn)在，當我們制作任何 Android 應用程序時，在大多數(shù)情況下，數(shù)據(jù)都來自服務器，我們將這些數(shù)據(jù)填充到我們的應用程序中。因此，下一個問題是如何預覽數(shù)據(jù)來自服務器的 UI，即，其數(shù)據(jù)現(xiàn)在不可用。對于這些情況，我們可以使用@PreviewParameter注解。

主要思想是制作一個虛擬數(shù)據(jù)并將該虛擬數(shù)據(jù)傳遞給預覽可組合函數(shù)。由于您不能將任何參數(shù)傳遞給 Preview Composable Function，因此為了實現(xiàn)這一點，您需要使用@PreviewParamter注解來傳遞參數(shù)。

所以，讓我們首先創(chuàng)建一個虛擬數(shù)據(jù)類。

創(chuàng)建一個名為的數(shù)據(jù)類Blog.kt并將以下代碼添加到其中：

data class Blog(
    val name: String,
    val author: String
)

現(xiàn)在，創(chuàng)建一個名為的類DummyBlogProvider，它實現(xiàn)了一個名為的接口PreviewParameterProvider：

class DummyBlogProvider : PreviewParameterProvider<Blog> {
    override val values =
        sequenceOf(Blog("Learning Compose", "MindOrks"), Blog("Learning Android", "MindOrks"))
    override val count: Int = values.count()
}

現(xiàn)在，我們完成了虛擬數(shù)據(jù)，我們可以在預覽中使用這個虛擬數(shù)據(jù)。以下是相同的示例：

@Preview
@Composable
fun BlogInfo(@PreviewParameter(DummyBlogProvider::class) blog: Blog) {
    SimpleTextComponent("${blog.name} by ${blog.author}")
}

您可以使用虛擬數(shù)據(jù)查看 UI 的預覽。

Column

AColumn是一種可組合的布局，用于將其所有子級一個接一個地垂直放置。它類似于具有垂直方向的 LinearLayout。

以下是列的示例：

@Composable
fun SimpleColumnComponent() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Hello! I am Text 1", color = Color.Black)
        Text(text = "Hello! I am Text 2", color = Color.Blue)
    }
}

Scrollable Column

當您使用 simpleColumn時，您只能使用手機屏幕的高度。但是，如果您的內(nèi)容超出了屏幕范圍，那么您可以使用ScrollableColumn. ScrollableColumn 就像 ScrollView。

以下是相同的示例：

@Composable
fun ScrollableColumnComponent(blogList: List<Blog>) {
    ScrollableColumn {
        val context = ContextAmbient.current
        Column {
            for (blog in blogList) {
                Card(
                    shape = RoundedCornerShape(4.dp),
                    modifier = Modifier.fillMaxWidth().padding(16.dp).clickable(onClick = {
                        Toast.makeText(context, "Author: ${blog.author}", Toast.LENGTH_SHORT).show()
                    }),
                    backgroundColor = Color(0xFFFFA867.toInt())
                ) {
                    Text(
                        blog.name, style = TextStyle(
                            fontSize = 16.sp,
                            textAlign = TextAlign.Center
                        ), modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    }
}

Lazy Column

ScrollableColumn在開始時加載其所有元素。例如，如果您有 50 個元素，并且在任何時間點屏幕只能顯示 10 個元素，并且您需要滾動才能看到另一個元素，那么如果您使用的是 a ScrollableColumn，那么最初將加載所有元素。

但是，如果您使用的是LazyColumnFor，那么它將僅加載當前在移動屏幕上可見的那些元素。它的行為有點類似于RecyclerView.

以下是相同的示例：

@Composable
fun LazyColumnScrollableComponent(blogList: List&lt;Blog&gt;) {
    LazyColumnFor(items = blogList, modifier = Modifier.fillMaxHeight()) { blog -&gt;
        val context = ContextAmbient.current
        Card(
            shape = RoundedCornerShape(4.dp),
            modifier = Modifier.fillParentMaxWidth().padding(16.dp).clickable(onClick = {
                Toast.makeText(context, "Author: ${blog.author}", Toast.LENGTH_SHORT).show()
            }),
            backgroundColor = Color(0xFFFFA867.toInt())
        ) {
            Text(
                blog.name, style = TextStyle(
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center
                ), modifier = Modifier.padding(16.dp)
            )
        }
    }
}

現(xiàn)在，如果要水平顯示內(nèi)容，則可以使用 Row、ScrollableRow 或 Lazy Row。所有這些的工作方式分別類似于 Column、ScrollableColumn 和 Lazy Column。因此，為了使此博客提供更多信息，我們不包括該部分。不過，您可以從我們的開源項目中找到這些代碼。

Box

Box 是一種可組合的布局，用于相對于其邊緣放置子級。最初，Stack 被用來代替 Box。但是現(xiàn)在，不推薦使用 Stack 并引入了 Box。

顧名思義，孩子被放置在父母內(nèi)部?？騼?nèi)的子元素按指定的順序繪制，如果子元素小于父元素，則默認根據(jù)對齊方式將它們放置在框內(nèi)。

以下是 Box 的示例：

@Composable
fun SimpleBoxComponent() {
    Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Image(imageResource(R.drawable.mindorks_cover))
        Text(
            modifier = Modifier.padding(start = 16.dp, top = 16.dp),
            text = "I am a text over Image",
            fontSize = 16.sp,
            color = Color.Red
        )
    }
}

Button

Button用于在用戶單擊時執(zhí)行某些操作。

以下是一個簡單Button的示例：

@Composable
fun SimpleButtonComponent() {
    val context = ContextAmbient.current
    Button(
        onClick = {
            Toast.makeText(context, "Thanks for clicking!", Toast.LENGTH_LONG).show()
        },
        modifier = Modifier.padding(8.dp).fillMaxWidth()
    ) {
        Text("Click Me")
    }
}

這里，Text用于在按鈕上放置一些文本，onClick回調(diào)用于監(jiān)聽按鈕的點擊事件。

通過將各種參數(shù)傳遞給 Button，您可以在很大程度上對其進行自定義。其中一些是：

制作圓角Button：

shape = RoundedCornerShape(12.dp)

制作一個帶邊框的Button：

border = BorderStroke(width = 1.dp, brush = SolidColor(Color.Green))

類似地，您可以為按鈕添加一些圖標、為按鈕應用顏色、禁用按鈕、制作輪廓按鈕、制作 IconButton、制作 FAB 等。您可以查看我們的開源項目以獲取更多示例。

Card

Card 是一種可組合的布局，用于制作 CardView。

以下是相同的示例：

@Composable
fun SimpleCardComponent() {
    Card(
        backgroundColor = Color(0xFFFFA867.toInt()),
        modifier = Modifier.padding(16.dp).fillMaxWidth()
    ) {
        Text(
            text = "Simple Card",
            textAlign = TextAlign.Center,
            style = TextStyle(
                fontSize = 16.sp
            ),
            modifier = Modifier.padding(16.dp)
        )
    }
}

Clickable

您可以使用 Clickable 對用戶做出可組合的反應。Clickable 支持單次點擊、雙擊和長按。

以下是相同的示例：

@Composable
fun SimpleTextComponent() {
    val context = ContextAmbient.current
    Text(
        text = "Click Me",
        textAlign = TextAlign.Center,
        color = Color.Black,
        modifier = Modifier.padding(16.dp).fillMaxWidth().clickable(onClick = {
            Toast.makeText(context, "Thanks for clicking! I am Text", Toast.LENGTH_SHORT).show()
        }, onLongClick = {
            Toast.makeText(context, "Thanks for LONG click! I am Text", Toast.LENGTH_SHORT).show()
        }, onDoubleClick = {
            Toast.makeText(context, "Thanks for DOUBLE click! I am Text", Toast.LENGTH_SHORT).show()
        })
    )
}

同樣，您可以使卡片可點擊。

Image

要顯示圖像，我們可以使用Image可組合的。

@Composable
fun SimpleImageComponent() {
    // Image is a composable that is used to display some image.
    val image = imageResource(R.drawable.mindorks_cover)
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Image(image)
    }
}

您還可以使用以下代碼制作圓角圖像：

Image(
    image,
    modifier = Modifier.fillMaxWidth().clip(shape = RoundedCornerShape(8.dp)),
    contentScale = ContentScale.Fit
)

Alert Dialog

顧名思義，AlertDialog 用于以對話框的形式向用戶顯示一些重要的消息（可能有一些操作）。

我們在 AlertDialog 中有標題、文本、確認按鈕和關(guān)閉按鈕。

@Composable
fun AlertDialogComponent() {
    val openDialog = remember { mutableStateOf(true) }
    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = { openDialog.value = false },
            title = { Text(text = "Alert Dialog") },
            text = { Text("Hello! I am an Alert Dialog") },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                        /* Do some other action */
                    }
                ) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                        /* Do some other action */
                    }
                ) {
                    Text("Dismiss")
                }
            },
            backgroundColor = Color.Black,
            contentColor = Color.White
        )
    }
}

Material AppBar

要在 Android 應用中顯示 AppBar，您可以在應用中使用TopAppBar或BottomAppBar可組合。在這里，您可以擁有 AppBar 上的標題（通常是應用程序名稱）、一些導航圖標和一些操作。

@Composable
fun TopAppBarComponent() {
    TopAppBar(
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        title = { Text("App Name") },
        navigationIcon = {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Menu)
            }
        },
        actions = {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
        }
    )
}

同樣，我們可以使用BottomAppBar也。

Material BottomNavigation

BottomNavigation 用于在屏幕底部顯示應用程序的一些重要操作，以便用戶輕松訪問。要將項目添加到 a BottomNavigation，我們需要使用BottomNavigationItem可組合項。

@Composable
fun BottomNavigationWithLabelComponent() {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("Home", "Blogs", "Profile")
    BottomNavigation(
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        backgroundColor = Color.Black,
        contentColor = Color.Yellow
    ) {
        items.forEachIndexed { index, item -&gt;
            BottomNavigationItem(
                label = { Text(text = item) },
                icon = { Icon(Icons.Filled.Favorite) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

要使用不帶標簽的底部導航，您可以alwaysShowLabels = false在BottomNavigationItem.

Material Checkbox

當我們有 2 個選項并且用戶可以選擇或取消選擇選項時，使用復選框。

@Composable
fun SimpleCheckboxComponent() {
    val checkedState = remember { mutableStateOf(true) }
    Row {
        Checkbox(
            checked = checkedState.value,
            modifier = Modifier.padding(16.dp),
            onCheckedChange = { checkedState.value = it },
        )
        Text(text = "Checkbox Example", modifier = Modifier.padding(16.dp))
    }
}

onCheckedChangecallback 用于標識 Checkbox 中的變化。

Material ProgressBar

ProgressBar 用于顯示應用程序中正在發(fā)生的一些進度。例如，從服務器下載進度或加載數(shù)據(jù)。

我們可以制作一個圓形進度條或線性進度條。

以下是循環(huán)進度條的示例：

@Composable
fun SimpleCircularProgressComponent() {
    CircularProgressIndicator(
        modifier = Modifier.padding(16.dp)
    )
}

您還可以使用設(shè)置進度進度progress = 0.4f。

同樣，您可以使用LinearProgressIndicator也。

Material Slider

Slider 用于從一系列值中選擇一些值。例如，您可以通過音量滑塊增加/減少音量，通過亮度滑塊等來增加/減少亮度。

滑塊可以是線性的，也可以有一些離散值，即您可以滑動以僅選擇允許的值，例如僅選擇整數(shù)值。

@Composable
fun SimpleSliderComponent() {
    var sliderValue by remember { mutableStateOf(0.4f) }
    Slider(
        value = sliderValue,
        modifier = Modifier.padding(8.dp),
        onValueChange = { newValue -&gt;
            sliderValue = newValue
        }
    )
    Text(
        text = "Slider value: $sliderValue",
        modifier = Modifier.padding(8.dp)
    )
}

同樣，您可以通過將 steps 參數(shù)傳遞給 Slider 來制作階梯滑塊。

Material Snackbar

Snackbar 用于在屏幕底部顯示一些信息，并放置在所有 UI 元素上。

@Composable
fun SimpleSnackbarComponent() {
    Snackbar(
        modifier = Modifier.padding(16.dp),
        text = {
            Text(text = "I'm a Simple Snackbar")
        }
    )
}

您還可以使用以下方法向 Snackbar 添加一些操作：

action = {
    Text(text = "OK", style = TextStyle(color = Color.Green))
}

Custom View

在 Compose 中，我們也可以制作一個 Canvas，在畫布上，我們可以繪制各種形狀，例如圓形、矩形、弧形等。

@Composable
fun CustomViewComponent() {
    Canvas(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        drawRect(
            color = Color.Red,
            // topLeft is the coordinate of top-left point
            topLeft = Offset(0f, 0f),
            size = Size(800f, 400f)
        )
        drawArc(
            Color.Gray,
            startAngle = 0f,
            sweepAngle = 120f,
            useCenter = true,
            size = Size(600f, 600f),
            topLeft = Offset(300f, 300f)
        )
    }
}

Crossfade動畫

我們也可以在 Compose 中使用動畫。例如，我們可以通過使用 Crossfade Composable 來使用 Crossfade 動畫。

@Composable
fun CrossFadeAnimation() {
    val colors = listOf(Color.Red, Color.Green, Color.Blue, Color.Gray)
    var current by remember { mutableStateOf(colors[0]) }
    Column(modifier = Modifier.fillMaxSize()) {
        Crossfade(current = current) { color -&gt;
            Box(Modifier.fillMaxSize().clickable(
                onClick = {
                    current = colors.random()
                }
            ).background(color))
            Text(
                modifier = Modifier.fillMaxSize(),
                textAlign = TextAlign.Center,
                text = "Click To See"
            )
        }
    }
}

在這里，Box 的顏色將隨著單擊 Box 時的 Crossfade 動畫而改變。

這就是本教程的內(nèi)容。您可以嘗試使用 Jetpack Compose 的許多其他示例。

翻譯鏈接：https://blog.mindorks.com/jetpack-compose-tutorial

以上就是Jetpack Compose 分步指南教程詳解的詳細內(nèi)容，更多關(guān)于Jetpack Compose 分步教程的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: