Compose组件转换XML布局1.0

学习JetPack Compose资源

学习资源：JetPack Compose博物馆

前言：

在JetPack Compose博物馆中，对于compose的讲解较为详细，我这篇笔记主要是记录自己不懂和不理解的知识点，可能会重复，也可能有其他的，学习Compose布局一般都是从传统XML布局中进行转换的，接下来开始学习不同布局的Compose组件。

预览界面的实现

1、在传统的XML文件中，都是可以一边填写代码一边查看页面，在Compose如何实现呢？
首先，对一个无参的方法添加@Preview和@Composable的注解，如下图所示

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChainOfCustodyTheme {

            Text(
                text = "Hello Android!",
                modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center), // 内容居中
            )

    }
}

2、上述的图标分别为Code 、Split、Design，选择Split就可以看到分屏显示，默认为左右分屏，再次点击Split图标可以切换为上下分屏。

3、在添加注解的方法中，有个小图标，点击可直接在设备中运行该方法，不需要全部运行了。如下图所示

Compose组件的布局管理

一、Row和Colum组件（LinearLayout）

看字面意思可知，Row对应XML布局中LinearLayout的水平布局，Colum对应XML布局中LinearnLayout的垂直布局

LinearLayout（垂直方向 → Column）

基本用法：

@Composable
fun VerticalList() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.SpaceEvenly // 垂直分布方式
    ) {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

等效于：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView ... />
    <TextView ... />
    <TextView ... />
</LinearLayout>

LinearLayout（水平方向 → Row）

权重分配

@Composable
fun HorizontalWeight() {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Left",
            modifier = Modifier
                .weight(1f) // 占剩余空间的1/3
                .background(Color.Gray)
        )
        Text(
            text = "Right",
            modifier = Modifier
                .weight(2f) // 占剩余空间的2/3
                .background(Color.LightGray)
        )
    }
}

等效于

<LinearLayout
    android:layout_width="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_weight="1" .../>
    <TextView
        android:layout_width="0dp"
        android:layout_weight="2" .../>
</LinearLayout>

二、相对布局 FrameLayout → Box

叠加元素

@Composable
fun OverlayElements() {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(R.drawable.background),
            contentDescription = null,
            modifier = Modifier.matchParentSize()
        )
        Button(
            onClick = { /* ... */ },
            modifier = Modifier.align(Alignment.BottomEnd) // 右下角对齐
        ) {
            Text("Action")
        }
    }
}

等效于

<FrameLayout ...>
    <ImageView ... />
    <Button
        android:layout_gravity="bottom|end" ... />
</FrameLayout>

三、RelativeLayout → ConstraintLayout 或 Box

使用ConstraintLayout需要额外添加依赖，注意需要和传统ConstrainLayout区分开来
依赖添加：

implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")

1. 用 ConstraintLayout 实现相对定位

@Composable
fun RelativePositioning() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (button, text) = createRefs()
        
        Button(
            onClick = { /* ... */ },
            modifier = Modifier.constrainAs(button) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
            }
        ) { Text("Button") }

        Text(
            text = "Next to Button",
            modifier = Modifier.constrainAs(text) {
                start.linkTo(button.end, margin = 16.dp)
                top.linkTo(button.top)
            }
        )
    }
}

2. 用 Box 实现简单相对布局

Box(modifier = Modifier.fillMaxSize()) {
    Text("Center", modifier = Modifier.align(Alignment.Center))
    Text("Top Start", modifier = Modifier.align(Alignment.TopStart))
}

五、GridLayout → LazyVerticalGrid 或自定义行/列

1. 网格布局

直接调用组件LazyVerticalGrid既可以完成实现

LazyVerticalGrid(
    columns = GridCells.Fixed(2), // 2列
    modifier = Modifier.fillMaxWidth()
) {
    items(10) { index ->
        Card(
            modifier = Modifier
                .padding(8.dp)
                .aspectRatio(1f)
        ) {
            Box(modifier = Modifier.background(Color.LightGray)) {
                Text("Item $index", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

六、TableLayout → 嵌套 Row 和 Column

@Composable
fun TableExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        // 表头行
        Row(modifier = Modifier.fillMaxWidth()) {
            Text(
                text = "Header 1",
                modifier = Modifier.weight(1f).padding(8.dp)
            )
            Text(
                text = "Header 2",
                modifier = Modifier.weight(2f).padding(8.dp)
            )
        }
        Divider(color = Color.Black, thickness = 1.dp)
        // 数据行
        Row(modifier = Modifier.fillMaxWidth()) {
            Text(
                text = "Data 1",
                modifier = Modifier.weight(1f).padding(8.dp)
            ) 
            Text(
                text = "Data 2",
                modifier = Modifier.weight(2f).padding(8.dp)
            )
        }
    }
}

七、ScrollView → Modifier.verticalScroll 或 LazyColumn

1. 简单滚动

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
) {
    repeat(50) { index ->
        Text("Item $index", modifier = Modifier.padding(8.dp))
    }
}

2. 惰性滚动（大数据集用 LazyColumn）

LazyColumn {
    items(1000) { index ->
        Text("Item $index", modifier = Modifier.padding(8.dp))
    }
}

八、Space → Spacer

Row {
    Text("Left")
    Spacer(modifier = Modifier.weight(1f)) // 占满剩余空间
    Text("Right")
}

九、include 标签 → @Composable 函数

1. 定义可复用组件

@Composable
fun Header(title: String) {
    Text(
        text = title,
        style = MaterialTheme.typography.h4,
        modifier = Modifier.padding(16.dp)
    )
}

// 在父布局中调用
Column {
    Header("Settings")
    // 其他内容...
}

总结对比表