Compose 布局系统

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("左侧")
    Text("中间")
    Text("右侧")
}

Column(
    modifier = Modifier.fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceEvenly,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("顶部")
    Text("中间")
    Text("底部")
}

Box(modifier = Modifier.size(100.dp)) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue)
    )
    Text(
        text = "居中文本",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
    val (button, text) = createRefs()
 
    Button(
        onClick = { /* 处理点击 */ },
        modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    ) {
        Text("按钮")
    }
 
    Text(
        text = "说明文本",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
            start.linkTo(button.start)
        }
    )
}

FlowRow(
    modifier = Modifier.fillMaxWidth(),
    mainAxisSpacing = 8.dp,
    crossAxisSpacing = 8.dp
) {
    repeat(10) { index ->
        Text(
            text = "Item $index",
            modifier = Modifier
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}

BoxWithConstraints {
    val screenWidth = maxWidth
    Column {
        if (screenWidth > 600.dp) {
            // 宽屏布局
            Row {
                Box(modifier = Modifier.weight(1f))
                Box(modifier = Modifier.weight(1f))
            }
        } else {
            // 窄屏布局
            Column {
                Box(modifier = Modifier.fillMaxWidth())
                Box(modifier = Modifier.fillMaxWidth())
            }
        }
    }
}

Box(
    modifier = Modifier
        .size(100.dp)           // 固定尺寸
        .fillMaxWidth()          // 填充宽度
        .height(50.dp)           // 指定高度
        .aspectRatio(16f/9f)     // 宽高比
)

Box(
    modifier = Modifier
        .padding(16.dp)          // 外边距
        .border(1.dp, Color.Gray) // 边框
        .padding(8.dp)           // 内边距
)

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceEvenly
) {
    Box(modifier = Modifier.align(Alignment.Start))
    Box(modifier = Modifier.align(Alignment.CenterHorizontally))
    Box(modifier = Modifier.align(Alignment.End))
}