Android XML布局与Compose组件对照手册

下面我将详细列出传统 XML 布局中的组件与 Compose 组件的对应关系，帮助您更好地进行迁移或混合开发。

基础布局对应

XML 布局	Compose 组件	说明
`LinearLayout` (vertical)	`Column`	垂直排列子项
`LinearLayout` (horizontal)	`Row`	水平排列子项
`FrameLayout`	`Box`	层叠子项
`RelativeLayout`	`Box` + `Modifier.align`	需要手动控制位置
`ConstraintLayout`	`ConstraintLayout` (Compose版)	需要额外依赖
`ScrollView`	`VerticalScroll`/`HorizontalScroll`	滚动容器
`GridLayout`	`LazyVerticalGrid`/`LazyHorizontalGrid`	网格布局

基础组件对应

XML 组件	Compose 组件	说明
`TextView`	`Text`	文本显示
`EditText`	`TextField`/`OutlinedTextField`	文本输入
`Button`	`Button`/`OutlinedButton`/`TextButton`	按钮
`ImageButton`	`IconButton`	图标按钮
`ImageView`	`Image`	图片显示
`CheckBox`	`Checkbox`	复选框
`RadioButton`	`RadioButton`	单选按钮
`Switch`	`Switch`	开关
`ProgressBar`	`LinearProgressIndicator`/`CircularProgressIndicator`	进度条
`SeekBar`	`Slider`	滑动条

复杂组件对应

XML 组件	Compose 组件	说明
`RecyclerView`	`LazyColumn`/`LazyRow`	列表/网格
`ViewPager`	`HorizontalPager`/`VerticalPager`	需要额外依赖
`Toolbar`	`TopAppBar`	顶部应用栏
`BottomNavigation`	`BottomAppBar` + `NavigationBar`	底部导航
`TabLayout`	`TabRow`	标签页
`Spinner`	`DropdownMenu`	下拉选择

属性对应关系

XML 属性	Compose 方式	示例
`android:layout_width`	`Modifier.width()`/`fillMaxWidth()`	`Modifier.fillMaxWidth()`
`android:layout_height`	`Modifier.height()`/`fillMaxHeight()`	`Modifier.height(100.dp)`
`android:padding`	`Modifier.padding()`	`Modifier.padding(8.dp)`
`android:margin`	`Modifier.padding()` (在外层布局)	`Column(Modifier.padding(8.dp)) { ... }`
`android:background`	`Modifier.background()`	`Modifier.background(Color.Red)`
`android:visibility`	`if`语句控制是否显示	`if(visible) { Text(...) }`
`android:gravity`	`Arrangement`和`Alignment`	`Column(verticalArrangement = Arrangement.Center)`
`android:layout_gravity`	`Modifier.align()`	`Box { Text(Modifier.align(Alignment.Center)) }`
`android:textSize`	`TextStyle.fontSize`	`Text(text = "Hi", fontSize = 16.sp)`
`android:textColor`	`TextStyle.color`	`Text(text = "Hi", color = Color.Red)`

特殊场景处理

自定义视图：
- 在Compose中使用AndroidView包裹
- 或完全重写为@Composable函数

Fragment混合：

class HybridFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View {return ComposeView(requireContext()).apply {setContent {MaterialTheme {// Compose内容}}}}
}

主题适配：

// 在Activity的onCreate中
setContent {MaterialTheme(colors = if (isDarkTheme) DarkColors else LightColors,typography = MyTypography,shapes = Shapes()) {// 内容}
}

迁移建议

布局转换步骤：
- 识别XML中的布局结构
- 转换为对应的Compose布局(Column/Row/Box)
- 逐个替换内部组件
- 处理事件绑定

示例转换：

<!-- XML版本 -->
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="16dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="标题"android:textSize="20sp"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="点击我"/>
</LinearLayout>

// Compose版本
Column(modifier = Modifier.fillMaxWidth().wrapContentHeight().padding(16.dp)
) {Text(text = "标题",fontSize = 20.sp)Button(onClick = { /* 处理点击 */ }) {Text("点击我")}
}