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)

特殊场景处理

1. 自定义视图：

   • 在Compose中使用AndroidView包裹
   • 或完全重写为@Composable函数

2. Fragment混合：

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

3. 主题适配：

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

迁移建议

1. 布局转换步骤：

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

2. 示例转换：

   
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:padding="16dp">
       
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="标题"
           android:textSize="20sp"/>
           
       <Button
           android: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("点击我")
       }
   }
   

通过这种对应关系表，您可以更系统地将现有XML布局逐步迁移到Compose，或在新开发中直接使用对应的Compose组件。