Compose 常用UI组件

找藉口是失败者的习惯

已于 2024-11-23 18:54:01 修改

阅读量1.4k

点赞数 35

分类专栏： Android Compose 文章标签： ui android

于 2024-11-19 22:12:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44780781/article/details/143896630

版权

Android Compose 专栏收录该内容

9 篇文章

订阅专栏

文章目录

前言
一、Text 组件
二、Button 组件
三、TextField 组件
四、 Image组件
五、Column、Row和Box 组件
六、Spacer 组件
七、LazyColumn 和 LazyRow 组件
八、Card 组件
九、Scaffold 组件
十、Navigation 组件
总结

前言

Jetpack Compose 是 Android 开发中的声明式 UI 工具包，它能够帮助开发者快速构建现代化、响应式的用户界面。通过 Compose，开发者能够以更加简洁和可读的方式编写 UI，而无需像传统的 XML 布局一样处理复杂的视图层级。本文将深入介绍 Jetpack Compose 中常用的 UI 组件，帮助开发者更好地理解其使用方式和场景。

一、Text 组件

Text 是 Compose 中最基础的 UI 组件之一，用于显示文本内容。你可以使用它来显示任何形式的文本，并通过 Modifier 来调整其外观和行为。

示例：

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

常用属性
text：显示的文本内容。
fontSize：字体大小。
fontWeight：字体粗细。
color：文本颜色。
modifier：用于调整布局的属性，如对齐、大小等。

二、Button 组件

Button 组件用于响应用户的点击事件，是 Compose 中最常用的交互组件之一。你可以自定义按钮的文本、颜色、形状等。

示例:

@Composable
fun MyButton(onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("Click Me")
    }
}

常用属性
onClick：点击按钮时执行的回调。
enabled：按钮是否启用。
colors：按钮的颜色配置。
modifier：自定义按钮的布局和外观。

三、TextField 组件

TextField 是用于获取用户输入的常用组件。它允许用户输入单行或多行文本，并提供了一些常用的输入功能，如文本验证、错误显示、密码输入等。

示例：

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Enter text") }
    )
}

常用属性
value：当前输入的文本。
onValueChange：文本变化时的回调。
label：文本框的标签。
keyboardOptions：键盘选项，如数字键盘、密码输入等。
modifier：调整文本框的布局和外观。

四、 Image组件

Image 用于显示图像，可以从资源文件、URL 或 Bitmap 加载图片。它是 Compose 中处理图像的基础组件。

示例：

@Composable
fun MyImage() {
    Image(painter = painterResource(id = R.drawable.ic_launcher), contentDescription = "Icon")
}

常用属性
painter：表示图像的绘制工具。
contentDescription：用于无障碍服务的描述。
modifier：设置图片的尺寸、形状等。

五、Column、Row和Box 组件

Column 和 Row 用于垂直和水平排列子组件，是 Compose 中常用的布局组件。
在这里插入图片描述
示例：

@Composable
fun MyLayout() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

在这里插入图片描述

@Composable
fun MyRowLayout() {
    Row(
        horizontalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxWidth()
    ) {
        Text("Item 1")
        Spacer(modifier = Modifier.width(16.dp))
        Text("Item 2")
        Spacer(modifier = Modifier.width(16.dp))
        Text("Item 3")
    }
}

常用属性
horizontalAlignment：设置子组件的水平对齐方式。
verticalArrangement：设置子组件的垂直排列方式。
modifier：控制布局的尺寸、间距等。

Box组件
用于在一个容器中堆叠子组件（子项可以彼此重叠）。它非常适合用于需要自定义对齐方式或者重叠效果的场景。
在这里插入图片描述

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .size(200.dp) // 设置 Box 的大小
            .background(Color.LightGray), // 背景色
        contentAlignment = Alignment.Center // 子项对齐方式
    ) {
        // 子组件
        Text("Center Aligned", color = Color.Black)
    }
}

六、Spacer 组件

Spacer 用于在布局中添加空白空间，常用于在子组件之间添加固定的间距。
示例:

@Composable
fun SpacerExample() {
    Row {
        Text("Item 1")
        Spacer(modifier = Modifier.width(16.dp))
        Text("Item 2")
    }
}

常用属性
modifier：设置空间的大小、填充等。

七、LazyColumn 和 LazyRow 组件

LazyColumn 和 LazyRow 用于高效地显示长列表（垂直或水平滚动）。它们会按需加载项，优化内存使用和性能。
示例：

@Composable
fun MyLazyColumn() {
    LazyColumn {
        items(100) { index ->
            Text("Item $index")
        }
    }
}

常用属性
items：列表中的数据项，可以是任意可迭代的集合。
itemContent：每个列表项的内容。

八、Card 组件

Card 组件提供了一个带有阴影和圆角的容器，用于包装和显示内容。它通常用于显示包含图片、标题、描述等信息的卡片式 UI。
示例：

@Composable
fun MyCard() {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = 4.dp,
        shape = RoundedCornerShape(8.dp)
    ) {
        Text("This is a card")
    }
}

常用属性
elevation：设置卡片的阴影。
shape：设置卡片的形状。
modifier：设置卡片的大小和布局。

九、Scaffold 组件

Scaffold 是 Compose 中的一个布局组件，用于实现典型的应用程序界面结构。它提供了常见的布局元素，例如顶部栏、底部栏、浮动操作按钮等。

示例：

@Composable
fun MyScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("My App") })
        },
        content = {
            Text("Hello, World!")
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* Handle click */ }) {
                Icon(Icons.Default.Add, contentDescription = null)
            }
        }
    )
}

常用属性
topBar：顶部应用栏。
bottomBar：底部栏。
floatingActionButton：浮动操作按钮。
content：主体内容。

十、Navigation 组件

Compose 提供了专门的导航库，用于在多个屏幕之间进行导航。NavController 是管理导航操作的核心。

示例：

@Composable
fun MyNavGraph(navController: NavController = rememberNavController()) {
    NavHost(navController, startDestination = "home") {
        composable("home") {
            HomeScreen(navController)
        }
        composable("details/{itemId}") { backStackEntry ->
            val itemId = backStackEntry.arguments?.getString("itemId")
            DetailsScreen(itemId)
        }
    }
}