Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说Android compose入门学习,希望能够帮助你!!!。

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

由于 Compose 基于 Kotlin 构建，因此可以与 Java 编程语言完全互操作，并且可以直接访问所有 Android 和 Jetpack API。它与现有的 UI 工具包也是完全兼容的，因此你可以混合原来的 View 和现在新的View。学过Flutter的就会发现，Compose的写法跟Flutter的写法如出一辙。

#### 引入Compose功能

###### 1.创建Compse项目

###### 2.gradle配置

在app下的build.gradle的Android块中添加，

```

buildFeatures {

compose true

}

```

并引入Compose的相关引用，compose\_version为1.0.0

```

androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"

debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

implementation "androidx.compose.ui:ui:$compose_version"

implementation "androidx.compose.material:material:$compose_version"

implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"

```

##### Composable 组合函数

1.Compose函数不同于普通的函数，它需要使用大写字母开头，和普通函数做区分。

2.Compose函数需要使用@Composable注解修饰，表示这是一个可组合函数。

```

@Composable

fun UIUse() {

}

```

##### Preview函数

@Preview表示该函数可以在Android Studio中预览。

```

@Preview

@Composable

fun UIUse() {

}

```

#### 基础控件的使用

* 在setContent中添加当前页面的根布局

```

setContent { }

```

* 添加Text文本组件

```

Text("XML Layout")

Text("Android Devs")

Text("Jetpack Compose")

```

* Box类似于Android中的ViewGroup，它是一个视图容器，可以在其中装载其他的组件

```

Box(

modifier = Modifier

.background(Color.Yellow)

.size(200.dp)

) {

Text("XML Layout")

}

```

* 添加图片使用Image

```

Image(

painter = painterResource(id = R.mipmap.test),

contentDescription = "这是内容",

modifier = Modifier

.size(150.dp, 110.dp)

.clip(RectangleShape),

contentScale = ContentScale.Crop

)

```

* Column、Row

Column可以创建一个垂直布局，Row可以创建一个水平布局。

同样有Modifier.padding().width().border().background()等属性。

horizontalAlignment = Alignment.CenterHorizontally表示水平居中对齐；

verticalAlignment = Alignment.CenterVertically表示垂直居中对齐。

```

Column(Modifier.padding(10.dp, 50.dp)

, horizontalAlignment = Alignment.CenterHorizontally) {

}

```

结合起来后：

```

@Preview

@Composable

fun UIUse() {

Column(Modifier.padding(10.dp, 50.dp)

, horizontalAlignment = Alignment.CenterHorizontally) {

Image(

painter = painterResource(id = R.mipmap.test),

contentDescription = "这是内容",

modifier = Modifier

.size(150.dp, 110.dp)

.clip(RectangleShape),

contentScale = ContentScale.Crop

)

Text("XML Layout")

Text("Android Devs")

Text("Jetpack Compose")

Row(verticalAlignment = Alignment.CenterVertically) {

Box(

modifier = Modifier

.background(Color.Yellow)

.size(200.dp)

) {

Text("XML Layout")

}}

}}

```

样式为：

* 创建列表：

可使用LazyColumn或者LazyRow来实现垂直、水平列表

```

@Composable

fun listViewUse() {

var list = ArrayList<String>()

list.add("Android")

list.add("Compose")

list.add("XMLLayout")

LazyColumn {

items(list) { name->

messageCard(name)

}

}

}

@Composable

fun messageCard(name: String) {

Row(modifier = Modifier.padding(all = 12.dp)) {

Image(

painter = painterResource(id = R.mipmap.test_head),

contentDescription = name,

modifier = Modifier

.size(42.dp)

.clip(CircleShape)

.border(1.5.dp, MaterialTheme.colors.secondary, CircleShape),

contentScale = ContentScale.Crop

)

Spacer(modifier = Modifier.width(10.dp))

Column {

Text(text = name,

color = MaterialTheme.colors.secondaryVariant,

style = MaterialTheme.typography.subtitle2,

fontSize = 16.sp)

Spacer(modifier = Modifier.width(12.dp))

Text(text = "这里是文本内容",

fontSize = 11.sp)

}

}

}

```

样式为：

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。