Android XML结构与Compose组件对照手册

下面我将具体列出传统 XML 结构中的组件与 Compose 组件的对应关系，资助您更好地举行迁徙或混淆开发。
基础结构对应

XML 结构Compose 组件说明LinearLayout (vertical)Column垂直排列子项LinearLayout (horizontal)Row水平排列子项FrameLayoutBox层叠子项RelativeLayoutBox + Modifier.align须要手动控制位置ConstraintLayoutConstraintLayout (Compose版)须要额外依赖ScrollViewVerticalScroll/HorizontalScroll滚动容器GridLayoutLazyVerticalGrid/LazyHorizontalGrid网格结构 基础组件对应

XML 组件Compose 组件说明TextViewText文本显示EditTextTextField/OutlinedTextField文本输入ButtonButton/OutlinedButton/TextButton按钮ImageButtonIconButton图标按钮ImageViewImage图片显示CheckBoxCheckbox复选框RadioButtonRadioButton单选按钮SwitchSwitch开关ProgressBarLinearProgressIndicator/CircularProgressIndicator进度条SeekBarSlider滑动条 复杂组件对应

XML 组件Compose 组件说明RecyclerViewLazyColumn/LazyRow列表/网格ViewPagerHorizontalPager/VerticalPager须要额外依赖ToolbarTopAppBar顶部应用栏BottomNavigationBottomAppBar + NavigationBar底部导航TabLayoutTabRow标签页SpinnerDropdownMenu下拉选择 属性对应关系

XML 属性Compose 方式示例android:layout_widthModifier.width()/fillMaxWidth()Modifier.fillMaxWidth()android:layout_heightModifier.height()/fillMaxHeight()Modifier.height(100.dp)android:paddingModifier.padding()Modifier.padding(8.dp)android:marginModifier.padding() (在外层结构)Column(Modifier.padding(8.dp)) { ... }android:backgroundModifier.background()Modifier.background(Color.Red)android:visibilityif语句控制是否显示if(visible) { Text(...) }android:gravityArrangement和AlignmentColumn(verticalArrangement = Arrangement.Center)android:layout_gravityModifier.align()Box { Text(Modifier.align(Alignment.Center)) }android:textSizeTextStyle.fontSizeText(text = "Hi", fontSize = 16.sp)android:textColorTextStyle.colorText(text = "Hi", color = Color.Red) 特殊场景处理

• 自定义视图：
  
  
  
  • 在Compose中利用AndroidView包裹
    
  • 或完全重写为@Composable函数
    
  
  
• Fragment混淆：
  
  1. class HybridFragment : Fragment() {
  2.     override fun onCreateView(
  3.         inflater: LayoutInflater,
  4.         container: ViewGroup?,
  5.         savedInstanceState: Bundle?
  6.     ): View {
  7.         return ComposeView(requireContext()).apply {
  8.             setContent {
  9.                 MaterialTheme {
  10.                     // Compose内容
  11.                 }
  12.             }
  13.         }
  14.     }
  15. }

  复制代码
• 主题适配：
  
  1. // 在Activity的onCreate中
  2. setContent {
  3.     MaterialTheme(
  4.         colors = if (isDarkTheme) DarkColors else LightColors,
  5.         typography = MyTypography,
  6.         shapes = Shapes()
  7.     ) {
  8.         // 内容
  9.     }
  10. }

  复制代码

迁徙建议

• 结构转换步骤：
  
  
  
  • 识别XML中的结构结构
    
  • 转换为对应的Compose结构(Column/Row/Box)
    
  • 逐个替换内部组件
    
  • 处理事件绑定
    
  
  
• 示例转换：
  
  1. <!-- XML版本 -->
  2. <LinearLayout
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:orientation="vertical"
  6.     android:padding="16dp">
  7.    
  8.     <TextView
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="标题"
  12.         android:textSize="20sp"/>
  13.         
  14.     <Button
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:text="点击我"/>
  18. </LinearLayout>

  复制代码
  1. // Compose版本
  2. Column(
  3.     modifier = Modifier
  4.         .fillMaxWidth()
  5.         .wrapContentHeight()
  6.         .padding(16.dp)
  7. ) {
  8.     Text(
  9.         text = "标题",
  10.         fontSize = 20.sp
  11.     )
  12.     Button(onClick = { /* 处理点击 */ }) {
  13.         Text("点击我")
  14.     }
  15. }

  复制代码

通过这种对应关系表，您可以更系统地将现有XML结构渐渐迁徙到Compose，或在新开发中直接利用对应的Compose组件。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。