下面我將詳細列出傳統 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. 示例轉換：

   <!-- 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("點擊我")}
   }
   

通過這種對應關系表，您可以更系統地將現有XML布局逐步遷移到Compose，或在新開發中直接使用對應的Compose組件。