Compose中的自定义Modifier与ComposeView扩展

自定义Modifier基础

Modifier是Compose中用于修饰可组合项的强大工具。

Name
特点
Type
features
Description
- 可重用的修饰逻辑
- 链式调用
- 提高代码可维护性
- 支持组合使用
Name
使用场景
Type
usage
Description
- 统一的样式定义
- 复杂的修饰组合
- 需要重复使用的修饰逻辑

自定义Modifier示例

fun Modifier.primaryButton() = composed {
    this.then(
        Modifier
            .padding(16.dp)
            .background(
                color = MaterialTheme.colorScheme.primary,
                shape = RoundedCornerShape(10.dp)
            )
            .shadow(elevation = 5.dp)
    )
}

// 使用方式
Button(
    onClick = {},
    modifier = Modifier.primaryButton()
) {
    Text("点击我")
}

ComposeView扩展

通过扩展ComposeView,可以创建可重用的自定义组件。

Name
特点
Type
features
Description
- 更简洁的调用语法
- 支持参数自定义
- 提高代码可读性
- 便于维护和修改
Name
使用场景
Type
usage
Description
- 简化复杂组件的创建
- 封装可复用的UI组件
- 统一管理UI风格

ComposeView扩展示例

fun ComposeView.setContent(
    content: @Composable () -> Unit
) {
    setContent {
        MaterialTheme {
            content()
        }
    }
}

@Composable
fun CardContainer(
    modifier: Modifier = Modifier,
    cornerRadius: Dp = 10.dp,
    elevation: Dp = 5.dp,
    content: @Composable () -> Unit
) {
    Card(
        modifier = modifier,
        shape = RoundedCornerShape(cornerRadius),
        elevation = CardDefaults.cardElevation(elevation)
    ) {
        content()
    }
}

// 使用方式
CardContainer {
    Text("卡片内容")
}

实战应用

结合自定义Modifier和ComposeView扩展实现复杂的UI效果。

Name
特点
Type
features
Description
- 组合多个修饰符
- 支持动态参数
- 复用度高
- 代码更清晰
Name
使用场景
Type
usage
Description
- 自定义动画效果
- 统一的列表样式
- 通用的状态处理

实战示例

fun Modifier.shake(
    animationSpec: InfiniteRepeatableSpec<Float> = infiniteRepeatable(
        animation = tween(100),
        repeatMode = RepeatMode.Reverse
    )
) = composed {
    var offsetX by remember { mutableStateOf(0f) }
    
    LaunchedEffect(Unit) {
        animate(
            initialValue = -10f,
            targetValue = 10f,
            animationSpec = animationSpec
        ) { value, _ ->
            offsetX = value
        }
    }
    
    Modifier.offset { IntOffset(offsetX.roundToInt(), 0) }
}

// 使用示例
Text(
    text = "输入错误!",
    modifier = Modifier.shake()
)