Compose第一弹可组合函数+Text

目标：

1.Compose是什么？有什么特征？

2.Compose的文本控件

一、Compose是什么？

Jetpack Compose 是用于构建原生 Android 界面的新工具包。

Compose特征：

1）声明式UI：使用声明性的函数构建一个简单的界面组件。

2）可组合思想：调用可组合函数来定义所需的元素，通过元素组合形成UI。

二、可组合函数

Compose 是围绕可组合函数构建的。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，而不必关注界面的构建过程（初始化元素、将其附加到父项等）。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。

2.1 页面入口

Android 的Activity，怎么接入Compose组件呢？

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Text("Hello world!")}}
}

在setContent中，设置需要引入的Compose组件。

其中，Text就是一个Compose可组合函数。

androidx.activity.compose.ComponentActivity

public fun ComponentActivity.setContent(parent: CompositionContext? = null,content: @Composable () -> Unit
) {val existingComposeView = window.decorView.findViewById<ViewGroup>(android.R.id.content).getChildAt(0) as? ComposeViewif (existingComposeView != null) with(existingComposeView) {setParentCompositionContext(parent)setContent(content)} else ComposeView(this).apply {// Set content and parent **before** setContentView// to have ComposeView create the composition on attachsetParentCompositionContext(parent)setContent(content)// Set the view tree owners before setting the content view so that the inflation process// and attach listeners will see them already presentsetOwners()setContentView(this, DefaultActivityContentLayoutParams)}
}

从中可以看出，通过ComposeView桥接View系统和Compose系统。

setContent 块定义了 activity 的布局，我们会在其中调用可组合函数。可组合函数只能从其他可组合函数调用。

2.2 定义可组合函数

定义包含文本显示的MessageCard

@Composable
fun MessageCard(name: String) {Text(text = "Hello $name!")
}

可以看出，Compose的UI系统不再依赖XML布局，以及布局编辑器。

2.3 Compose预览

在可组合函数控件，添加 @Preview 即可对组件进行预览。

@Preview
@Composable
fun PreviewMessageCard() {MessageCard("Android")
}

三、Compose布局

3.1 Column垂直布局

Column(modifier = Modifier.wrapContentSize().fillMaxSize().padding(paddingValues).padding(horizontal = 10.dp)) {Text(text = "Model List", modifier = Modifier.padding(top = 10.dp))Divider(thickness = 1.dp, modifier = Modifier.padding(vertical = 5.dp))LazyColumn(modifier = Modifier.wrapContentHeight()) {items(items = appViewModel.modelList,key = { modelState -> modelState.id }) { modelState ->ModelView(navController = navController,modelState = modelState,appViewModel = appViewModel)}}}

3.2 Row水平布局

Row水平布局相当于View系统的LinearLayout.

Row(horizontalArrangement = Arrangement.Center,modifier = Modifier.fillMaxWidth()) {Text(text = messageData.text,textAlign = TextAlign.Center,color = MaterialTheme.colorScheme.inversePrimary,fontSize = 12.sp,lineHeight = 12.sp,modifier = Modifier.wrapContentWidth().background(color = MaterialTheme.colorScheme.inverseOnSurface,shape = RoundedCornerShape(5.dp)).padding(5.dp).widthIn(max = 300.dp))}

四、使用 Material Design

Jetpack Compose 原生提供 Material Design 3 及其界面元素的实现。您将使用 Material Design 样式改进 MessageCard 可组合项的外观。

首先，使用在您的项目中创建的 Material 主题 ComposeTutorialTheme 和 Surface 来封装 MessageCard 函数。在 @Preview 和 setContent 函数中都需要执行此操作。这样一来，可组合项即可沿用应用主题中定义的样式，从而在整个应用中确保一致性。

Material Design 是围绕 Color、Typography、Shape 这三大要素构建的。您将逐一添加这些要素。

// ...class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeTutorialTheme {Surface(modifier = Modifier.fillMaxSize()) {MessageCard(Message("Android", "Jetpack Compose"))}}}}
}@Preview
@Composable
fun PreviewMessageCard() {ComposeTutorialTheme {Surface {MessageCard(msg = Message("Lexi", "Take a look at Jetpack Compose, it's great!"))}}
}

4.1 颜色

通过 MaterialTheme.colorScheme，使用已封装主题中的颜色来设置样式。

如需更改此设置，您可以在 MaterialTheme.kt 文件中将 dynamicColor 设为 false。

4.2 Typography（排版）

MaterialTheme 中提供了 Material Typography 样式，只需将其添加到 Text 可组合项中即可。

Column {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {Text(text = msg.body,modifier = Modifier.padding(all = 4.dp),style = MaterialTheme.typography.bodyMedium)}}

4.3 Shape（形状）

通过 Shape，我们可以添加最后的“点睛之笔”。首先，将消息正文封装在 Surface 可组合项中。这样即可自定义消息正文的形状和高度。此外，还要为消息添加内边距，以改进布局。

4.4 启用深色主题

您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

import android.content.res.Configuration@Preview(name = "Light Mode")
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES,showBackground = true,name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {ComposeTutorialTheme {Surface {MessageCard(msg = Message("Lexi", "Hey, take a look at Jetpack Compose, it's great!"))}}
}

uiMode = Configuration.UI_MODE_NIGHT_YES, 设置深色主题。