android中compose系列之总纲

文章目录

前言
一、开启Compose
二、使用Compose

前言

本系列用来记录学习compose中相关的知识点内容，适合有一定基础的同学进行相关内容的复习，同时后续也会不断更新内容以适应最新的api,有些没有涉及到的部分后面发现了也会进行添加，同时也欢迎各位在评论区告诉我，最后附上官方文档方便随时看最新Compose使用的介绍https://developer.android.com/develop/ui/compose/text/user-interactions?hl=zh-cn，

另外喜欢更清晰的目录形式的可参考此网站，但是有些内容可能已经过时https://jetpackcompose.cn/docs/installation。

一、开启Compose

以下两个方法任选其一：

创建Compose的项目，并选择Empty Activity
原项目中主模块下面的build.gradle文件中开启Compose支持

kotlin 复制代码

android {
    buildFeatures {
        compose true //开启compose的支持
    }
}

dependencies {  //添加相关支持的依赖
    implementation libs.androidx.compose.ui
    implementation libs.androidx.compose.ui.graphics //图形绘制库
    implementation libs.androidx.compose.ui.tooling.preview //预览支持库
    implementation libs.androidx.compose.material3 //material风格支持库
}

当使用Compose之后下，相关的颜色、主题等资源需要按照如下图所存放：

二、使用Compose

1.生成Compose

可通过以下两种方式使用：

使用Android studio自带的方式快捷创建带有Compose的activity，可选择空白或者带有导航的activity(右键当前文件\new\Compose)
手动输入带有@Compose标记的函数(快捷式输入comp)

注：软件自动生成Compose的activiy页面后的自带示例代码，具体每行代码作用介绍如下

kotlin 复制代码

class MainActivity : ComponentActivity() { //继承ComponentActivity类，提供了compose的UI支持
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() //启用边缘延伸，是内容延伸到状态栏和导航区域
        setContent { //使用Composable作为参考来作为UI布局
            MyComposeDemoTheme { //自定义Compose主题，系统默认生成的
                //使用Material风格的基础控件充满屏幕
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> //自动处理系统UI内边距
                    Greeting( //自定义Composable 函数
                        name = "Android", //传递给组件的文本内容
                        modifier = Modifier.padding(innerPadding) //应用内边距
                    )
                }
            }
        }
    }
}

@Composable //标记为Compose函数
fun Greeting(name: String, modifier: Modifier = Modifier) { //接受的参数，可选的修饰符(默认空,用于控制尺寸、边距、对齐等布局行为)
    Text( //Text的文本显示组件
        text = "Hello $name!",
        modifier = modifier //应用传入的修饰符
    )
}


/**
 * Preview
 * 标记为预览函数，可在软件中直接看到该控件现显示情况
 * 只能运用在无参且Composable标记的函数，但是不会运行到设备或模拟器中，可以预览多个组合函数
 */
@Preview(showBackground = true) //showBackground为是否显示背景
@Composable
fun GreetingPreview() {
    MyComposeDemoTheme { //使用了系统默认生成的Compose主题
        Greeting("Android") //使用默认生成的Compose函数
    }
}

2.相关标记说明

@Composable(快捷comp)

复制代码

Jetpack Compose 是围绕着 Composable 函数建立的。这些函数让你通过描述它的形状和数据依赖性，以编程方式定义你的 UI，而不是专注于 UI 的构建过程。要创建一个 Composable 函数，只需在函数名称中添加 @Composable 注解。

kotlin 复制代码

@Composable
fun GreetingPreview() {
    Text("这是预览界面的内容！")
}

@Preview(快捷prev)

可以在AndroidStudio中实时预览 Composable 函数的 UI 效果，而无需运行应用到设备或模拟器上,直接在软件中右边显示，具体显示效果如下，也可以在修改内容后在图中右上角的按钮手动点击重新生成。

1.预览界面的主要参数设置

kotlin 复制代码

@Preview(
    name = "预览1", //为预览命名，方便在多个预览中进行识别
    showBackground = true, //是否显示背景(默认为白色)
    backgroundColor = 0xFFE0E0E0, //改变背景颜色，需要与showBackground配合
    showSystemUi = true, //是否显示系统界面，让预览区出现整个手机UI的界面展示，但不代表设备的最终展示
    widthDp = 100, //设置预览宽度
    heightDp = 100, //设置预览高度
    uiMode = Configuration.UI_MODE_NIGHT_YES, //指定ui的模式为深色模式，可选深色模式、夜间模式等
    fontScale = 1.5f, //设置字体缩放比例  150%
    locale = "fr", //指定预览的语言环境  法语
    device = Devices.NEXUS_6, //自定预览的设备型号
    group = "分类1" //对预览进行分组，在有很多预览时可以根据分组方便管理

)
@Composable
fun GreetingPreview() {
    Text("这是预览界面的内容！")
}

2.预览的不同使用方式

2.1 对同一个函数设置不同的预览参数

kotlin 复制代码

@Preview(
    name = "预览1", //为预览命名，方便在多个预览中进行识别
    showBackground = true, //是否显示背景(默认为白色)
    backgroundColor = 0xFFE0E0E0, //改变背景颜色，需要与showBackground配合
    uiMode = Configuration.UI_MODE_NIGHT_YES, //指定ui的模式为深色模式，可选深色模式、夜间模式等
    fontScale = 1.5f, //设置字体缩放比例  150%

)
@Preview(
    name = "预览2",
    showBackground = true)
@Composable
fun GreetingPreview() {
    Text("这是预览界面的内容！")
}

2.1 在很多预览时可以进行分组管理

kotlin 复制代码

@Preview(
    name = "预览1", //为预览命名，方便在多个预览中进行识别
    showBackground = true, //是否显示背景(默认为白色)
    backgroundColor = 0xFFE0E0E0, //改变背景颜色，需要与showBackground配合
    uiMode = Configuration.UI_MODE_NIGHT_YES, //指定ui的模式为深色模式，可选深色模式、夜间模式等
    fontScale = 1.5f, //设置字体缩放比例  150%
    group = "分类1" //对预览进行分组，在有很多预览时可以根据分组方便管理
)
@Composable
fun GreetingPreview() {
    Text("这是预览界面的内容！")
}

@Preview(
    name = "预览1", //为预览命名，方便在多个预览中进行识别
    showBackground = true, //是否显示背景(默认为白色)
    backgroundColor = 0xFFE0E0E0, //改变背景颜色，需要与showBackground配合
    uiMode = Configuration.UI_MODE_NIGHT_YES, //指定ui的模式为深色模式，可选深色模式、夜间模式等
    fontScale = 1.5f, //设置字体缩放比例  150%
    group = "分类1" //对预览进行分组，在有很多预览时可以根据分组方便管理
)
@Composable
fun GreetingPreview1() {
    Text("这是预览界面的内容！")
}

@Preview(
    name = "预览1", //为预览命名，方便在多个预览中进行识别
    showBackground = true, //是否显示背景(默认为白色)
    backgroundColor = 0xFFE0E0E0, //改变背景颜色，需要与showBackground配合
    uiMode = Configuration.UI_MODE_NIGHT_YES, //指定ui的模式为深色模式，可选深色模式、夜间模式等
    fontScale = 1.5f, //设置字体缩放比例  150%
    group = "分类2" //对预览进行分组，在有很多预览时可以根据分组方便管理
)
@Composable
fun GreetingPreview2() {
    Text("这是预览界面的内容！")
}