Compose UI视图修饰方法

基础外观修饰

常用的视图外观修饰方法。

Name
文字修饰
Type
text
Description
- textStyle(): 设置文字样式
- color: 设置颜色
- fontWeight: 字重设置
Name
尺寸修饰
Type
size
Description
- size: 设置尺寸
- padding(): 设置内边距
- offset(): 设置偏移量
Name
背景修饰
Type
background
Description
- background(): 设置背景
- border(): 设置边框

基础修饰示例

Text(
    text = "Hello World",
    style = MaterialTheme.typography.titleLarge,
    color = Color.Blue,
    fontWeight = FontWeight.Bold,
    modifier = Modifier
        .size(width = 200.dp, height = 100.dp)
        .padding(16.dp)
        .background(Color.Yellow)
        .clip(RoundedCornerShape(10.dp))
)

Icon(
    imageVector = Icons.Default.Star,
    contentDescription = null,
    tint = Color.Yellow,
    modifier = Modifier
        .size(30.dp)
        .offset(x = 10.dp, y = 10.dp)
)

布局修饰

控制视图布局和对齐方式的修饰符。

Name
对齐方式
Type
alignment
Description
- align(): 设置对齐
- wrapContentSize(): 包裹内容
Name
布局控制
Type
layout
Description
- weight(): 权重设置
- fillMaxSize(): 填充空间
- aspectRatio(): 宽高比

布局修饰示例

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(
        text = "Left",
        modifier = Modifier.weight(1f)
    )
    Text(
        text = "Center",
        modifier = Modifier.weight(2f)
    )
    Text(
        text = "Right",
        modifier = Modifier.weight(1f)
    )
}

Image(
    painter = painterResource(id = R.drawable.photo),
    contentDescription = null,
    modifier = Modifier
        .width(200.dp)
        .aspectRatio(1f),
    contentScale = ContentScale.Fit
)

交互修饰

添加用户交互和动画效果。

Name
手势识别
Type
gesture
Description
- clickable(): 点击事件
- pointerInput(): 手势识别
- draggable(): 拖拽事件
Name
动画效果
Type
animation
Description
- animateContentSize(): 大小动画
- animateXXXAsState(): 状态动画

交互修饰示例

var size by remember { mutableStateOf(100.dp) }

Box(
    modifier = Modifier
        .size(size)
        .background(Color.Blue, CircleShape)
        .clickable {
            size = if (size == 100.dp) 150.dp else 100.dp
        }
        .animateContentSize()
)

Button(
    onClick = { /* 动作 */ }
) {
    Text("点击我")
}

高级修饰

复杂的组合修饰方法。

Name
组合修饰
Type
composition
Description
- composed(): 组合修饰符
- then(): 链接修饰符
Name
绘制修饰
Type
drawing
Description
- drawBehind(): 背景绘制
- drawWithContent(): 内容绘制
- graphicsLayer(): 图形图层

高级修饰示例

Text(
    text = "Dynamic Text",
    modifier = Modifier.composed {
        val color = if (isSystemInDarkTheme()) {
            Color.White
        } else {
            Color.Black
        }
        Modifier.drawBehind {
            drawRect(color)
        }
    }
)

Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            clip = true
            shape = RoundedCornerShape(20.dp)
        }
        .background(Color.Blue)
) {
    Text(
        text = "Masked",
        style = MaterialTheme.typography.headlineLarge,
        fontWeight = FontWeight.Bold
    )
}

自定义修饰符

创建可重用的自定义修饰符。

Name
定义方法
Type
definition
Description
- Modifier.Element
- Modifier扩展函数
Name
使用场景
Type
usage
Description
- 组合多个修饰符
- 统一样式定义
- 代码复用

自定义修饰符示例

fun Modifier.card() = this.then(
    Modifier
        .padding(16.dp)
        .background(
            color = MaterialTheme.colorScheme.surface,
            shape = RoundedCornerShape(10.dp)
        )
        .shadow(
            elevation = 5.dp,
            shape = RoundedCornerShape(10.dp)
        )
)

// 使用
Text(
    text = "Card",
    modifier = Modifier.card()
)