新建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使用。咱们来运转一下，看一下作用：

当咱们点击运转时，项目会报错：

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即可成功运转。

运转成果如下图：

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特点，能够给字体增加距离。

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

增加距离后的作用如图所示：

4.简略布局Row和Column

咱们先像程序中增加两个Text，修正Greeting的代码:

@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组件后的控件横向排列。

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….