新建Compose工程，以及简单的布局介绍

大家好，今天我们来讲一下Android Compose的基础知识。我们一起来学习一下Compose应用的创建，基本的控件和简单的布局。

Compose基础知识

1.Compose应用的创建

下载安装新版的Android Studio，我这里用的是Giraffe版本。这里可以通过Android开发者的官方网站下载最新版本即可，不一定要和我这个一致。点击Android Studio ->About android Studio即可查看当前Android Studio的版本。

现在我们来新建一个应用.点击File->New->New Project.会弹出一个对话框。左侧我们选择Phone and Tablet，这个选项是用来创建手机和平板应用。除了这个选项，我们还看到有手表应用（Wear OS），电视应用(Television)和汽车应用(Automotive).右边我们选择中间有一个三色环的Empty Activity。顺便我们来看一下其他选项，其他选项有不带Activity的，有"Basic Views Activity"和"Empty VIews Activity"。这里的View Activity是指用传统的xml方式写页面。

第一行是应用的名字。

第二行是应用的包名，在手机上用于唯一标识应用。包名我们就采用反向的域名命名方式。一般是以com.xxx开头，后面加上当前应用的名字。

第三行是代码保存的位置，可以自定义合适的存储位置。

第四行是支持的最小的sdk版本，我们也知道Android系统平台每年都会发布新版本，所以它的api也是在不断地变化中。这里可以选择默认的sdk版本。

第五行我们也可以选择默认的配置。

比如说这里的第一行应用的名字我们可以填写为ComposeProject1。

点击Finish，我们就成功创建了一个Compose应用。我们来运行一下，看一下效果：

当我们点击运行时，项目会报错：

vbnet 复制代码

3 issues were found when checking AAR metadata: 1. Dependency 'androidx.activity:activity:1.8.1' requires libraries and applications that depend on it to compile against version 34 or later of the Android APIs.

上述报错是由于依赖的activity版本和app module下build.gradle文件中的compileSdk和targetSdk版本33不兼容导致的，将app module下build.gradle文件中的compileSdk和targetSdk版本由33改成34即可成功运行。

运行结果如下图：

kotlin 复制代码

package com.example.composeproject1import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.material3.MaterialThemeimport androidx.compose.material3.Surfaceimport androidx.compose.material3.Textimport androidx.compose.runtime.Composableimport androidx.compose.ui.Modifierimport androidx.compose.ui.tooling.preview.Previewimport com.example.composeproject1.ui.theme.ComposeProject1Themeclass MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            ComposeProject1Theme {                // A surface container using the 'background' color from the theme                Surface(                    modifier = Modifier.fillMaxSize(),                    color = MaterialTheme.colorScheme.background                ) {                    Greeting("Android")                }            }        }    }}@Composablefun Greeting(name: String, modifier: Modifier = Modifier) {    Text(        text = "Hello $name!",        modifier = modifier    )}@Preview(showBackground = true)@Composablefun GreetingPreview() {    ComposeProject1Theme {        Greeting("Android")    }}

2.注解

我们来看一下项目自动生成的代码

@Compose注解

如果我们想要让一个函数能被识别成为Compose组件的话，我们就必须用上这个注解。Compose的组件是可以重复利用的。

@Preview注解

加上Preview注解后，就可以单独预览这一个Compose组件。

3.使用控件 Text, Surface，微调页面。

我们来看一下它的内容。最外层的函数是SetContent。所有的Compose组件都是从这里调用的。接下来我们能看到一个ComposeProject1Theme的主题。点击进这个主题看一下，这个主题里定义了颜色，排版和内容。主题定义在文件而且定义了深色模式和浅色模式这两种不同的模式。然后是官方的Surface组件。Surface组件内部是一个名为Greeting的自定义Compose组件。

在Greeting中，我们可以看到有一个Text组件用来显示文本。改为

修改背景颜色，将Surface组件中的color属性由MaterialTheme.colorScheme.onPrimary改为

MaterialTheme.colorScheme.primary,这样我们的背景变成了主题中定义的蓝色，文字变成了白色。

这会文字有点太贴边了，我们通过修改Modifier属性，可以给它增加文字外侧的间距。

通过修改Greeting组件中的Text组件的modifier属性，可以给字体增加间距。

less 复制代码

@Composablefun Greeting(name: String, modifier: Modifier = Modifier) {    Text(        text = "Hello $name!",        modifier = Modifier.padding(24.dp)    )}

增加间距后的效果如图所示：

4.简单布局Row和Column

我们先像程序中添加两个Text，修改Greeting的代码:

less 复制代码

@Composablefun Greeting(name: String, modifier: Modifier = Modifier) {    Text(        text = "Hello Android",        modifier = Modifier.padding(24.dp)    )    Text(        text = "Hello World",        modifier = Modifier.padding(24.dp)    )}

运行后看到如下叠放的效果，文字变得难以识别。

这时我们就需要用到布局组件Row或者Column。使用Row组件后的控件横向排列。

vbnet 复制代码

Row {    Text(        text = "Hello Android",        modifier = Modifier.padding(24.dp)    )    Text(        text = "Hello World",        modifier = Modifier.padding(24.dp)    )}

显示效果如下：

将Row替换成Column，显示效果如下：

今天就为大家介绍到这里，上述内容参考Google官方的教程，代码及内容教程中都已包含。

Jetpack Compose基础知识

代码链接：github.com/android/cod....