學習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")}
}

等效于：

<LinearLayoutandroid: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))}
}

等效于

<LinearLayoutandroid:layout_width="match_parent"android:orientation="horizontal"><TextViewandroid:layout_width="0dp"android:layout_weight="1" .../><TextViewandroid: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 ... /><Buttonandroid: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")// 其他內容...
}

---

---

總結對比表

傳統布局	Compose 替代方案	關鍵特性
LinearLayout(垂直)	Column	verticalArrangement 控制垂直間距
LinearLayout(水平)	Row	horizontalArrangement 控制水平間距
FrameLayout	Box	align 控制子項對齊方式
RelativeLayout	ConstraintLayout	通過 linkTo 定義約束關系
GridLayout	LazyVerticalGrid	固定列數或自適應列寬
TableLayout	嵌套 Row 和 Column	通過 weight 實現單元格比例
ScrollView	Modifier.verticalScroll	簡單滾動內容
ListView/RecyclerView	LazyColumn/LazyRow	惰性加載 + 自動復用
Space	Spacer	空白占位
include	@Composable 函數	直接調用自定義組件