第一个Android项目

什么是Jetpack Compose？

继苹果推出SwiftUI框架之后，Android世界也推出了基于声明式用户界面构建风格的UI框架。在Android世界中，这个框架就是Jetpack Compose。

我们的第一个Jetpack Compose项目

要在Android Studio中创建Jetpack Compose项目，首先在Android Studio的欢迎屏幕中单击New project按钮。

您将看到的第一个屏幕将提示您选择项目类型。

单击“Empty Activity”选项，然后单击Next。

当你选择Empty Activity作为项目类型时，Android Studio将自动默认使用Kotlin和Jetpack Compose为你的项目。

在下一个屏幕上输入项目的名称，并记下项目文件夹的位置。

Android Studio将为您的项目生成一些启动代码。

android. bundle导入androidx.activity.ComponentActivity导入androidx.activity. composer . setcontent导入androidx.activity.enableEdgeToEdge导入androidx. composer .foundation.layout. fillmaxsize导入androidx. composer .material3. scaffold导入androidx. composer .material3. text导入androidx. composer .runtime. composable导入androidx. composer .ui. modifier导入androidx.compose.ui.tooling.preview.Preview进口edu.lawrence.helloandroid.ui.theme.HelloAndroidTheme类MainActivity: ComponentActivity(){覆盖有趣onCreate (savedInstanceState:包?){super.onCreate (savedInstanceState) enableEdgeToEdge () setContent {HelloAndroidTheme{支架(修饰符= Modifier.fillMaxSize ()) {innerPadding - >问候(name =“Android”修饰符= Modifier.padding (innerPadding ) ) } } } } } @ 可有趣的问候(名称:字符串,修饰符:Modifier = Modifier) {Text(Text = "Hello $name!", Modifier = Modifier)} @Preview(showBackground = true) @Composable fun GreetingPreview() {HelloAndroidTheme {Greeting("Android")}}

这里有很多东西，但是你在这里看到的大部分结构将在我们看到的每个例子中重复出现。

这里要注意的第一个结构是MainActivity类。Android要求我们使用一个activity对象作为我们视图的容器。在这个例子中，我们创建了一个MainActivity类，它扩展了ComponentActivity基类。

当我们创建一个activity类的时候，我们需要重写基类的onCreate（）方法。这个方法负责初始化我们的活动。onCreate（）方法中最重要的事情是对setContent（）方法的调用。该方法接受一个参数，该参数是一个lambda表达式，它将为活动设置用户界面。在这段代码中，单个参数被设置为末尾的lambda表达式。

活动的内容由一组嵌套的标准元素组成。最外层的元素是Theme元素，它负责元素的整体外观。这个主题元素是在Android Studio自动创建的一个单独文件中定义的。下一个元素是Scaffold，它最终将作为工具栏和视图主要内容的容器。在本例中，脚手架只包含主要内容。

这个简单示例的主要内容是一个可组合元素，它通过代码中自己的函数定义。

Greeting函数在用户界面中设置唯一的元素，它用@Composable进行了注释。设置可组合组件的函数的目的是设置并返回组成该组件的一组用户界面元素。这个例子非常简单，因为Greeting只包含一个Text（）组件。

样式元素

在下一个示例中，我将保留前一个示例的基本结构，并使用一些代码对Greeting组件中的文本外观进行修改。

android. bundle导入androidx.activity.ComponentActivity导入androidx.activity. composer . setcontent导入androidx.activity.enableEdgeToEdge导入androidx. composer .foundation.layout. arrangement导入androidx. composer .foundation.layout. box导入androidx. composer .foundation.layout. column导入androidx. composer .foundation.layout. fillmaxsize导入androidx. composer .foundation.layout.padding导入导入androidx. composer .material3. scaffold导入androidx. composer .material3. text导入androidx. composer .runtime. composable导入androidx. composer .ui. alignment导入androidx. composer .ui. tool.preview.preview导入androidx. composer .ui.unit.sp导入edu.劳伦斯.hellojetpack.ui.theme. hellojetpacktheme类MainActivity：ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState) enableEdgeToEdge() setContent {HelloJetpackTheme {Scaffold(modifier = modifier . fillmaxsize ()) {innerPadding -> Column（verticalArrangement = Arrangement. Bundle）。居中，horizontalAlignment =对齐。centerhorizontal, modifier= modifier .padding(innerPadding). fillmaxsize ()) {Greeting(name = "Android", modifier= modifier。background(color= color . green).padding(24.dp))}}}}}} @Composable fun Greeting(name: String, modifier: modifier = modifier) {Text(Text = "Hello $name!", fontSize = 48。@Preview(showBackground = true) @Composable fun GreetingPreview() {HelloJetpackTheme {Greeting("Android", modifier。background(color= color . green).padding(24.dp))}}

我在这里赢博体育了一些更改来修改视图的外观和感觉。

我把它包起来。问候()a中的分量列()组件。我这样做是因为列()组件允许我指定如何排列列中的元素。在本例中，我添加了代码来告诉列在视图中垂直居中，在视图中水平居中。
在Greeting（）中设置Text（）组件时，我向构造函数赢博体育了一些额外的参数。的字形大小参数允许我指定文本使用的字体大小，而修饰符参数允许我控制文本外观的其他方面。
的修饰符参数Text ()组件希望我传递给它一个modifier对象。的调用中设置了修饰符问候()函数。我使用的修改器指定文本应该用绿色的背景色和24像素的额外填充来渲染。

以下是关于如何在Jetpack Compose中设置文本样式和修饰符基础的进一步文档。

实现交互

对于今天的最后一个示例，我将在Jetpack Compose中构造一个简单的“Hello, World”赢博体育程序，该赢博体育程序在用户界面中包含几个元素，包括一个带有关联操作的按钮。

下面是该示例的完整代码。

android. bundle导入androidx.activity.ComponentActivity导入androidx.activity. composer . setcontent导入androidx.activity.enableEdgeToEdge导入androidx. composer .foundation.layout. arrangement导入androidx. composer .foundation.layout. box导入androidx. composer .foundation.layout. spacer导入androidx.compose.foundation.layout.Spacer导入androidx. composer .foundation.layout. fillmaxsize导入androidx. composer .foundation.layout.height导入androidx. composer .foundation.layout.padding导入androidx. composer .material3. button导入androidx. composer .material3. scaffold导入androidx. composer .material3. text导入androidx. composer .runtime. composable导入androidx. composer .runtime. mutablestateof导入androidx. composer .runtime. comable导入androidx. composer . align导入androidx. composer .ui. modifier导入导入androidx. composer .ui.tool .preview. preview导入androidx. composer .ui.unit.dp导入androidx. composer .ui.unit.sp导入edu.lawrence.hellojetpack.ui.theme.HelloJetpackTheme类MainActivity: ComponentActivity() {override fun onCreate(savedInstanceState：{super.onCreate(savedInstanceState) enableEdgeToEdge() setContent {HelloJetpackTheme {Scaffold(modifier = modifier . fillmaxsize ()) {innerPadding -> Column（verticalArrangement = Arrangement.）居中，horizontalAlignment =对齐。centerhorizontal, modifier= modifier .padding(innerPadding). fillmaxsize ()) {Greeting()}}}}}} @Composable fun Greeting() {val Greeting = remember {mutableStateOf("")} Button（onClick={Greeting .;）value = "Hello, Android!"}) {Text("Greet Me!“)} spacing (modifier = modifier .height(20.dp)) Text(Text = greeting. ”value, fontSize = 48。修饰语=修饰语。background(color= color . green).padding(24.dp))} @Preview(showBackground = true) @Composable fun GreetingPreview() {HelloJetpackTheme {Greeting()}}

这个例子是第一个使用状态变量的例子。在Jetpack Compose中，我们通过在组件函数中设置局部变量来设置状态变量，这些局部变量通过特殊的remember（）函数进行初始化。状态变量存储所谓的可观察对象。Jetpack compose将监视该对象的变化，每当它看到可观察对象的值发生变化时，它就会渲染该组件，以显示状态变量的更新状态。可观察对象的值必须通过调用特殊的可变状态构造函数来初始化。

Jetpack Compose中的按钮需要有一个onClick回调函数和一个主体。在大多数情况下，按钮的主体将是按钮显示的一些文本。在这个例子中，我传递给按钮的回调函数改变了状态变量的值。这反过来将强制重新呈现Greeting组件，以便在按钮下方的Text组件中显示问候语的新值。

在本例中，Greeting组件现在由三个子组件组成：一个按钮、一个分隔符和一些文本。