Jetpack Compose 学习指南（二）-阿里云开发者社区

Jetpack Compose 学习指南（二）

2023-09-22 165

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Jetpack Compose 学习指南（二）

Lazy Column

ScrollableColumn在开始时加载其所有元素。例如，如果您有 50 个元素，并且在任何时间点屏幕只能显示 10 个元素，并且您需要滚动才能看到另一个元素，那么如果您使用的是 a ScrollableColumn，那么最初将加载所有元素。

但是，如果您使用的是LazyColumnFor，那么它将仅加载当前在移动屏幕上可见的那些元素。它的行为有点类似于RecyclerView.

以下是相同的示例：

@Composablefun LazyColumnScrollableComponent(blogList: List<Blog>) {
    LazyColumnFor(items = blogList, modifier = Modifier.fillMaxHeight()) { blog ->
        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)
            )
        }
    }}

现在，如果要水平显示内容，则可以使用 Row、ScrollableRow 或 Lazy Row。所有这些的工作方式分别类似于 Column、ScrollableColumn 和 Lazy Column。因此，为了使此博客提供更多信息，我们不包括该部分。不过，您可以从我们的开源项目中找到这些代码。

Box

Box 是一种可组合的布局，用于相对于其边缘放置子级。最初，Stack 被用来代替 Box。但是现在，不推荐使用 Stack 并引入了 Box。

顾名思义，孩子被放置在父母内部。框内的子元素按指定的顺序绘制，如果子元素小于父元素，则默认根据对齐方式将它们放置在框内。

以下是 Box 的示例：

@Composablefun 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

按钮用于在用户单击时执行某些操作。

以下是一个简单按钮的示例：

@Composablefun 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回调用于监听按钮的点击事件。

通过将各种参数传递给 Button，您可以在很大程度上对其进行自定义。其中一些是：

制作圆角按钮：

shape = RoundedCornerShape(12.dp)

制作一个带边框的按钮：

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

类似地，您可以为按钮添加一些图标、为按钮应用颜色、禁用按钮、制作轮廓按钮、制作 IconButton、制作 FAB 等。您可以查看我们的开源项目以获取更多示例。

Card

Card 是一种可组合的布局，用于制作 CardView。

以下是相同的示例：

@Composablefun 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 支持单次点击、双击和长按。

以下是相同的示例：

@Composablefun 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可组合的。

@Composablefun 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 中有标题、文本、确认按钮和关闭按钮。

@Composablefun 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 上的标题（通常是应用程序名称）、一些导航图标和一些操作。

@Composablefun 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可组合项。

@Composablefun 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 ->
            BottomNavigationItem(
                label = { Text(text = item) },
                icon = { Icon(Icons.Filled.Favorite) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }}

要使用不带标签的底部导航，您可以alwaysShowLabels = false在BottomNavigationItem.

Material Checkbox

当我们有 2 个选项并且用户可以选择或取消选择选项时，使用复选框。

@Composablefun 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 用于显示应用程序中正在发生的一些进度。例如，从服务器下载进度或加载数据。

我们可以制作一个圆形进度条或线性进度条。

以下是循环进度条的示例：

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

您还可以使用设置进度进度progress = 0.4f。

同样，您可以使用LinearProgressIndicator也。

Material Slider

Slider 用于从一系列值中选择一些值。例如，您可以通过音量滑块增加/减少音量，通过亮度滑块等来增加/减少亮度。

滑块可以是线性的，也可以有一些离散值，即您可以滑动以仅选择允许的值，例如仅选择整数值。

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

同样，您可以通过将 steps 参数传递给 Slider 来制作阶梯滑块。

Material Snackbar

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

@Composablefun 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))}

自定义View

在 Compose 中，我们也可以制作一个 Canvas，在画布上，我们可以绘制各种形状，例如圆形、矩形、弧形等。

@Composablefun 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)
        )
    }}

淡入淡出动画

我们也可以在 Compose 中使用动画。例如，我们可以通过使用 Crossfade Composable 来使用 Crossfade 动画。

@Composablefun 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 ->
            Box(Modifier.fillMaxSize().clickable(
                onClick = {
                    current = colors.random()
                }
            ).background(color))
            Text(
                modifier = Modifier.fillMaxSize(),
                textAlign = TextAlign.Center,
                text = "Click To See"
            )
        }
    }}

在这里，Box 的颜色将随着单击 Box 时的 Crossfade 动画而改变

Jetpack Compose 学习指南（二）

Lazy Column

Box

Button

Card

Clickable

Image

Alert Dialog

Material AppBar

Material BottomNavigation

Material Checkbox

Material ProgressBar

Material Slider

Material Snackbar

自定义View

淡入淡出动画

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Jetpack Compose 学习指南（二）

Lazy Column

Box

Button

Card

Clickable

Image

Alert Dialog

Material AppBar

Material BottomNavigation

Material Checkbox

Material ProgressBar

Material Slider

Material Snackbar

自定义View

淡入淡出动画

热门文章

最新文章

相关课程

相关电子书