通过这个完整的教程，我们将学习如何使用 Text、TextField、Preview、Column、Row、Button、Card、AlertDialog、MaterialDesign 元素等。因此，事不宜迟，让我们开始创建一个 Jetpack Compose 项目。因此，本教程是关于通过示例学习适用于 Android 的 Jetpack Compose。
GitHub地址：https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples
注意：要使用 Jetpack Compose，您需要拥有最新的 Canary 版本的 Android Studio 4.2。因此，您可以转到Android Studio 预览页面并下载最新的 Canary 版本，然后创建一个 Empty Compose Activity。
Compose 函数
在 Jetpack Compose 中，可组合函数用于以编程方式定义应用程序的所有 UI。因此，您不需要为应用程序的布局使用任何 XML 文件。制作可组合函数所需要做的就是使用@Composable函数名称的注释。可组合函数的基本语法是：
@Composablefun AnyUiComponent() { // Code for UI element}
现在，您知道了可组合函数是什么以及如何使用@Composable注解创建可组合函数。让我们继续看Text的例子。
显示简单Text
在本教程的这一部分中，我们将学习如何使用 compose 显示简单的文本。
要显示文本，我们使用 Text Composable 并在其中传递要显示的字符串。例如，
@Composablefun SimpleText(displayText: String) { Text(text = displayText)}
在这里，SimpleText是一个可组合函数，在该函数内部，我们正在使用Text并传递displayText给它。
现在，您可以从活动方法的块中调用此SimpleText函数。setContentonCreate
class SimpleTextActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { SimpleText(getString("I am learning Compose")) } } }}
在这里，我们使用一个Column用于垂直显示某些内容的 Column，我们正在调用SimpleTextComposable 函数。
将样式应用于文本
我们可以将各种样式应用于文本，例如增加字体大小、更改颜色等。
因此，让我们创建一个名为 的函数SetTextStyling：
@Composablefun SetTextStyling(displayText: String, style: TextStyle? = null, maxLines: Int? = null) { Text( text = displayText, modifier = Modifier.padding(16.dp), style = style ?: TextStyle.Default, overflow = TextOverflow.Ellipsis, maxLines = maxLines ?: Int.MAX_VALUE )}
在上面的函数中，参数是displayText即要显示的文本，style即要放在Text 上的样式，maxLines即文本允许的最大行数。如果文本超过最大行，则将显示省略号（...）。
我们将通过传递这些参数来调用这个函数。让我们看看其中的一些：
- 设置字体大小：
style = TextStyle( fontSize = 24.sp)
- 要设置字体粗细，请将 text-style 传递为：
fontWeight = FontWeight.Bold
同样，您可以更改字体大小、文本颜色、字体系列、下划线文本等。您可以从我们的开源项目中看到所有这些。
使用 TextField 进行输入
就像 EditText 一样，在 Compose 中我们可以使用TextField和BaseTextField。BaseTextField仍处于试验阶段，可以随时删除或永久添加。因此，要使用BaseTextField，您需要添加@ExperimentalFoundationApi注释。
下面是一个简单的例子BaseTextField：
@ExperimentalFoundationApi@Composablefun SimpleTextFieldComponent() { Surface(color = Color.LightGray, modifier = Modifier.padding(16.dp)) { var text by remember { mutableStateOf(TextFieldValue("Enter text here")) } BaseTextField( value = text, modifier = Modifier.padding(16.dp).fillMaxWidth(), onValueChange = { text = it } ) }}
在上面的函数中，我们有一个BaseTextFieldinside a Surface。我们有一个名为 的回调onValueChange。当 的输入发生一些变化时调用此回调，BaseTextField并且更新的文本将作为回调的参数出现。
这是一个例子BaseTextField。Material Design 还为 EditText 提供了一个 Composable，即TextField. 一个简单的实现TextField如下：
@Composablefun SimpleMaterialTextFieldComponent() { var text by savedInstanceState { "" } TextField( value = text, modifier = Modifier.padding(16.dp).fillMaxWidth(), onValueChange = { text = it }, label = { Text("Label") } )}
TextField的行为类似于BaseTextField。在这里TextField，你还有一件事，即label。标签是在TextField中没有文本时显示在 中的文本TextField。
我们可以通过向它传递各种参数来自定义这个 BaseTextField 和 TextField。例如，
- 仅显示数字键盘：
var text by remember { mutableStateOf(TextFieldValue("0123")) }BaseTextField(value = text, keyboardType = KeyboardType.Number, onValueChange = { text = it })
- 将密码作为输入：
keyboardType = KeyboardType.Password,visualTransformation = PasswordVisualTransformation()
- 在 TextField 中添加占位符（当 TextField 为空且有焦点时显示）
placeholder = { Text("MindOrks") }
同样，我们可以添加图标，在 TextFiled 中显示错误消息，设置 errorColor、backgroundColor、intractionState、activeColor、inactiveColor 等。您可以在我们的开源项目中找到这些。
您可以尝试这些并在 Android Studio 本身中查看输出。是的，你没听错。您可以在 Android Studion 本身中预览任何 UI 元素。让我们看看如何。
在 Android Studio 中预览
Android Studio 提供了一个很棒的功能，可以在工作室本身中预览您的 UI 组件，而且非常动态。因此，每当您想测试一些 UI 组件时，您都可以通过制作 Composable 函数并使用@Preview注解在 Android Studio 中简单地预览它。
以下是相同的示例：
// This is a Composable function to display a Text@Composablefun SimpleText(displayText: String) { Text(text = displayText)}@Preview@Composablefun SimpleTextPreview() { SimpleText("Hi I am learning Compose")}
现在，在预览选项卡（Studio 的右侧）中，您可以看到上述 Composable 函数的预览。
您可以使用不同宽度和高度的任意数量的预览。如果您单击预览中的任何 UI 元素，Android Studio 会将您带到创建该 UI 的行。
此外，您可以使用参数将一些名称放入预览中name。要命名预览，您需要添加以下代码：
@Preview(name = "Named Preview")
默认情况下，预览的名称是函数的名称。
以下是 Android Studio 中预览功能的示例：
注意：您不能将任何参数传递给 Preview Composable 函数。
预览参数
在上一节中，我们学习了如何使用 Android Studio 的预览功能。现在，当我们制作任何 Android 应用程序时，在大多数情况下，数据都来自服务器，我们将这些数据填充到我们的应用程序中。因此，下一个问题是如何预览数据来自服务器的 UI，即，其数据现在不可用。对于这些情况，我们可以使用@PreviewParameter注解。
主要思想是制作一个虚拟数据并将该虚拟数据传递给预览可组合函数。由于您不能将任何参数传递给 Preview Composable Function，因此为了实现这一点，您需要使用@PreviewParamter注解来传递参数。
所以，让我们首先创建一个虚拟数据类。
创建一个名为的数据类Blog.kt并将以下代码添加到其中：
data class Blog( val name: String, val author: String )
现在，创建一个名为的类DummyBlogProvider，它实现了一个名为 的接口PreviewParameterProvider：
class DummyBlogProvider : PreviewParameterProvider<Blog> { override val values = sequenceOf(Blog("Learning Compose", "MindOrks"), Blog("Learning Android", "MindOrks")) override val count: Int = values.count()}
现在，我们完成了虚拟数据，我们可以在预览中使用这个虚拟数据。以下是相同的示例：
@Preview@Composablefun BlogInfo(@PreviewParameter(DummyBlogProvider::class) blog: Blog) { SimpleTextComponent("${blog.name} by ${blog.author}")}
您可以使用虚拟数据查看 UI 的预览。
Column
Column是一种可组合的布局，用于将其所有子级一个接一个地垂直放置。它类似于具有垂直方向的 LinearLayout。
以下是列的示例：
@Composablefun SimpleColumnComponent() { Column(modifier = Modifier.padding(16.dp)) { Text(text = "Hello! I am Text 1", color = Color.Black) Text(text = "Hello! I am Text 2", color = Color.Blue) }}
Scrollable Column
当您使用 simpleColumn时，您只能使用手机屏幕的高度。但是，如果您的内容超出了屏幕范围，那么您可以使用ScrollableColumn. ScrollableColumn 就像 ScrollView。
以下是相同的示例：
@Composablefun ScrollableColumnComponent(blogList: List<Blog>) { ScrollableColumn { val context = ContextAmbient.current Column { for (blog in blogList) { Card( shape = RoundedCornerShape(4.dp), modifier = Modifier.fillMaxWidth().padding(16.dp).clickable(onClick = { Toast.makeText(context, "Author: ${blog.author}", Toast.LENGTH_SHORT).show() }), backgroundColor = Color(0xFFFFA867.toInt()) ) { Text( blog.name, style = TextStyle( fontSize = 16.sp, textAlign = TextAlign.Center ), modifier = Modifier.padding(16.dp) ) } } } }}
