Compose 自定义组件

@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = onClick,
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.primary
        )
    ) {
        Text(text)
    }
}

class CustomComponentState(
    initialValue: String = ""
) {
    var text by mutableStateOf(initialValue)
    var isEnabled by mutableStateOf(true)
}
 
@Composable
fun rememberCustomComponentState(
    initialValue: String = ""
) = remember { CustomComponentState(initialValue) }

@Composable
fun CustomComponent(
    onDispose: () -> Unit
) {
    DisposableEffect(Unit) {
        onDispose {
            onDispose()
        }
    }
    
    // 组件内容
}

@Composable
fun CustomDataComponent(
    data: Flow<String>
) {
    var text by remember { mutableStateOf("") }
    
    LaunchedEffect(Unit) {
        data.collect { newData ->
            text = newData
        }
    }
    
    Text(text)
}

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // 测量子元素
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
 
        // 确定布局大小
        val width = placeables.maxOf { it.width }
        val height = placeables.sumOf { it.height }
 
        // 放置子元素
        layout(width, height) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

@Composable
fun CustomGestureComponent(
    onDrag: (Offset) -> Unit,
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier
        .pointerInput(Unit) {
            detectDragGestures { change, dragAmount ->
                change.consume()
                onDrag(dragAmount)
            }
        }
    )
}

@Composable
fun CustomCard(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Card(
        modifier = modifier,
        elevation = 4.dp
    ) {
        content()
    }
}
 
// 使用示例
CustomCard {
    Column {
        Text("标题")
        Text("内容")
    }
}

@Composable
fun OptimizedList(
    items: List<Item>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(
            items = items,
            key = { it.id }
        ) { item ->
            key(item.id) {
                ItemRow(item)
            }
        }
    }
}

@Composable
fun AccessibleCustomComponent(
    onClick: () -> Unit,
    contentDescription: String
) {
    Box(
        modifier = Modifier
            .clickable(onClick = onClick)
            .semantics {
                this.contentDescription = contentDescription
                this.role = Role.Button
            }
    ) {
        // 组件内容
    }
}