【Android】Compose布局

1.标准布局组件

• 使用Column可将多个项垂直地放置在屏幕上
• 使用Row可将多个项水平放置在屏幕上
• 使用Box可将一个元素放在另一个元素上

修饰符

标准布局组件修饰符（modifiers）是用来增强或修改可组合项（composable）行为和外观的工具。这些修饰符可以用来调整大小、添加点击事件、设置背景颜色等。以下是一些常用的修饰符：

• Modifier.padding()：为组件增加内边距。
• Modifier.size()：设置组件的宽度和高度。
• Modifier.width() 和 Modifier.height()：分别设置组件的宽度和高度。
• Modifier.fillMaxSize()：使组件填充其父容器的全部可用空间。
• Modifier.fillMaxWidth() 和 Modifier.fillMaxHeight()：使组件分别填充其父容器的全部可用宽度或高度。
• Modifier.weight()：用于Row或Column中子元素的尺寸分配，根据权重值来决定占据的空间比例。
• Modifier.clickable()：添加点击事件到组件上。
• Modifier.background()：设置组件的背景颜色或绘制。
• Modifier.border()：为组件添加边框。
• Modifier.clip()：裁剪组件内容以适应给定形状。
• Modifier.align()：在布局容器内对齐组件，比如在Row中垂直居中。
• Modifier.layout()：自定义组件的测量和布局逻辑。
• Modifier.offset()：相对其原始位置偏移组件的位置。
• Modifier.testTag()：添加一个测试标签，方便UI测试。

@Composable
fun PhotographerCard(modifier: Modifier = Modifier) {
   
    Row(
        modifier = Modifier
            .clip(RoundedCornerShape(4.dp))
            .background(color = MaterialTheme.colorScheme.surface)
            .clickable(onClick = {
    /*TODO*/ }).padding(16.dp)
    ) {
   
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colorScheme.surfaceVariant
        ) {
   
            Image(
                painter = painterResource(id = R.drawable.img),
                contentDescription = null
            )
        }

        Spacer(modifier = Modifier.width(8.dp))

        Column(
            modifier = Modifier.padding(start = 8.dp)
                .align(Alignment.CenterVertically)
        ) {
   
            Text(
                text = "Hello World",
                fontWeight = FontWeight.Bold
            )
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
   
                Text(
                    text = "3 minutes ago",
                    style = MaterialTheme.typography.bodyLarge
                )
            }

        }
    }
}

Slots-API

Jetpack Compose 的 Slots API 是一种更高级别的布局构建方式，它允许开发者创建复杂的布局结构，并且提供了更大的灵活性来定义布局的内部结构。通过 Slots API，你可以指定一个布局中哪些部分是固定的，哪些部分是可以由调用者自定义填充的。这在创建可复用和灵活的布局组件时非常有用。

它使用了 Scaffold 和一些基础的可组合组件来构建一个具有顶部应用栏（TopAppBar）和主体内容（BodyContent）的布局。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LayoutStudy(){
   
    Scaffold(
        topBar = {
   
            TopAppBar(
                title = {
   
                    Text(text = "LayoutStudy")
                },
                actions = {
   
                    IconButton(onClick = {
    /*TODO*/ }) {
   
                        Icon(imageVector = Icons.Default.Favorite, contentDescription = "")
                    }
                }
            )
        }
    ){
   
        innerPadding ->
        BodyContent(modifier = Modifier.padding(innerPadding))
    }
}

@Composable
fun BodyContent(modifier: Modifier = Modifier){
   
    Column(
        modifier = Modifier.padding(8.dp)
    ) {
   
        Text(text = "Hi there!")
        Text(text = "Thanks for going through the LayoutStudy")
    }
}

Scaffold 是 Jetpack Compose 中的一个高级布局组件，它提供了遵循 Material Design 规范的页面结构，包括顶部应用栏、底部导航栏、抽屉等。这里只使用了 topBar 参数。

列表

• 如果用例不需要任何滑动，可以使用简单的Column或Row
• 如果需要显示大量列表项（或者长度未知），可以使用LazyColumn或LazyRow

@Composable
fun SimpleColumn1(){
   
    Column {
   
        repeat(100) {
   
            Text(text = "Hello world $it",style = MaterialTheme.typography.bodyLarge)
        }
    }
}


@Composable
fun SimpleColumn(){
   
    val scrollState = rememberScrollState()
    Column(modifier = Modifier.verticalScroll(scrollState)) {
   
        repeat(100) {
   
            Text(text = "Hello world $it",style = MaterialTheme.typography.bodyLarge)
        }
    }
}


@Composable
fun LazyList(){
   
    val scrollState = rememberLazyListState()
    LazyColumn(state = scrollState)  {
   
        items(100) {
   
            Text(text = "Hello world $it"