前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >安卓软件开发:Jetpack Compose中常见的核心概念总结-1

安卓软件开发:Jetpack Compose中常见的核心概念总结-1

原创
作者头像
Nimyears
修改2024-10-30 17:48:27
修改2024-10-30 17:48:27
1790
举报

1. 基本布局

Column - 列布局

代码语言:kotlin
复制
Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("This is a column")
    Button(onClick = { /* TODO*/ }) {
        Text("Click Nim")
    }
}
  • Column: 用于垂直排列子组件。
  • verticalArrangement: 垂直排列子组件的方式。
  • horizontalAlignment: 水平方向上对齐方式。

Row - 行布局

代码语言:kotlin
复制
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left Nim")
    Text("Right Nim")
}
  • Row: 用于水平排列子组件。
  • horizontalArrangement: 水平方向上排列子组件的方式。
  • verticalAlignment: 垂直方向上对齐方式。

2. 修饰符使用

Modifier.padding() - 填充

代码语言:kotlin
复制
Text(
    text = "Hello Nim",
    modifier = Modifier.padding(16.dp)
)
  • padding: 为组件添加内边距。

Modifier.clickable() - 点击事件

代码语言:kotlin
复制
Text(
    text = "Click Me",
    modifier = Modifier.clickable { /* action */ }
)
  • clickable: 使组件可以响应点击事件。

Modifier.background() - 背景颜色

代码语言:kotlin
复制
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
)
  • background: 设置组件的背景颜色。

3. 状态管理

State - 状态

代码语言:kotlin
复制
var count by remember { mutableStateOf(0) }

Button(onClick = { count++ }) {
    Text("Count: $count")
}
  • remember: 记住状态以在重组时保持不变。
  • mutableStateOf: 创建一个可变的状态。

State Hoisting - 状态提升

代码语言:kotlin
复制
@Composable
fun Counter(
    count: Int,
    onIncrement: () -> Unit
) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}
  • State Hoisting: 将状态提升到更高的层次以使组件无状态。

4. 样式与主题

Typography - 排版

代码语言:kotlin
复制
Text(
    text = "Styled Tv",
    style = MaterialTheme.typography.h6
)
  • MaterialTheme.typography: 使用Material Design的排版样式。

Color - 颜色

代码语言:kotlin
复制
Text(
    text = "Color Tv",
    color = Color.Blue
)
  • color: 设置文本颜色。

5. 动画

animateFloatAsState - 浮点动画

代码语言:kotlin
复制
val animatedAlpha by animateFloatAsState(
    targetValue = if (isVisible) 1f else 0f,
    animationSpec = tween(durationMillis = 500)
)
Box(
    modifier = Modifier.alpha(animatedAlpha)
)
  • animateFloatAsState: 动画效果随着状态变化而变动。
  • tween: 指定动画的时间和过渡效果。

AnimatedVisibility - 动画显示与隐藏

代码语言:kotlin
复制
AnimatedVisibility(visible = isVisible) {
    Text("This is visible!")
}
  • AnimatedVisibility: 组件在显示和隐藏时自动应用动画。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 基本布局
    • Column - 列布局
    • Row - 行布局
  • 2. 修饰符使用
    • Modifier.padding() - 填充
    • Modifier.clickable() - 点击事件
    • Modifier.background() - 背景颜色
  • 3. 状态管理
    • State - 状态
    • State Hoisting - 状态提升
  • 4. 样式与主题
    • Typography - 排版
    • Color - 颜色
  • 5. 动画
    • animateFloatAsState - 浮点动画
    • AnimatedVisibility - 动画显示与隐藏
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档