Compose第一弹可组合函数+Text

news2024/11/17 3:49:30

目标：

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? ComposeView

    if (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 attach
        setParentCompositionContext(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 present
        setOwners()
        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, 设置深色主题。