Compose - 基本使用

原创已于 2025-05-11 01:20:03 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2023-08-23 18:56:52 首次发布

Compose 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了AndroidCompose框架，强调其优点如性能提升、声明式UI的自动数据绑定和高效更新。讲解了如何添加Compose依赖，以及在Activity中集成和预览Compose组件的方法，包括处理ViewModel和Android运行时类的预览问题。

一、概念

1.1 Compose优势

由一个个可以组合的Composable函数拼成界面，方便维护和复用。
布局模型不允许多次测量，提升了性能。
Compose可以和View互操作（相互包含对方）。

1.2 声明式UI

APP展示的数据绝大多数不是静态数据而是会实时更新，传统的命令式UI写法更新界面繁琐且容易同步错误。Compose会对界面用到的数据自动进行订阅（属性委托），当数据变化时界面会自动更新（同为数据和界面关联，databinding只能更新组件的值，Compose可以控制组件切换显示）。

声明式UI	只需要把界面写出来，不需要再手动写代码去刷新界面。重新生成整个屏幕界面成本高昂，Compose生成界面后，数据变动只执行必要的重组（局部刷新）。
命令式UI	xml写的界面，当数据变了就需要Java/Kotlin手动（命令指挥）刷新，即 findViewById( ) 遍历树拿到控件，再 setText( ) 设置数据改变节点。

二、使用

2.1 添加依赖

查看官方最新版本

兼容性对应关系

各种官方组件

BoM物料清单：随着依赖的库越来越多，为了保证不同库不同版本之间能正常配合，引入依赖时具体的库不指定版本，而是由BoM管理。

最低版本：Kotlin ≥ 1.5.10、Android ≥ 5.0（API21）、AndroidStudio ≥ Arctic Fox 2020.3.1。

android {
    buildFeatures {
        compose true    //启用Compose功能
    }
    composeOptions {
        //见上方链接，此处定义的Kotlin编译器扩展版本需要对应兼容的Kotlin版本
        kotlinCompilerExtensionVersion = "1.4.2"
    }
}

dependencies {
    //Compose
    def composeBom = platform('androidx.compose:compose-bom:2023.01.00')
    implementation composeBom
    androidTestImplementation composeBom
    //主题
    implementation 'androidx.compose.material3:material3'
    //预览
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    //UI测试
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'
    //可选搭配
    implementation 'androidx.activity:activity-compose:1.7.0'   //Activity
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'   //ViewModel
    implementation 'androidx.compose.runtime:runtime-livedata'  //LiveData
    implementation 'androidx.constraintlayout:constraintlayout-compose:1.0.1'   //ConstraintLayout
    implementation 'io.coil-kt:coil-compose:2.3.0' //Coil
    implementation 'androidx.navigation:navigation-compose:2.5.3'   //Navigation
    //    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"  //AppCompatTheme
}

2.2 Activity调用

需要继承的是ComponentActivity，使用 setContent { } 替换 setContentView( )。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {    // 设置显示内容，用来替换setContentView
            Show("Hello World!")
        }
    }
}

三、预览效果 @Preview

使用该注解的组合函数可以在AndroidStudio右上角直接预览效果和点击交互，也能直接部署该预览在真机或模拟器上查看效果和点击交互。AS按出prev能快速打出模板代码。

只能修饰无参可组合函数：可以用无参函数包裹有参函数传个值给它来预览。

neme	设置的该名称会在布局预览中显示。
showBackground	预览默认是不显示背景色的，设为true才显示。
backgroundColor	设置背景颜色。
showDecoration	是否显示Statusbar和Toolbar，true为显示。
group	为该Preview设置group名字，可以在UI中以group为单位显示。
fontScale	可以在预览中对字体放大，范围是从0.01。
showSystemUi	设为 true 显示系统界面（状态栏，屏幕按键）。
widthDp heightDp	预览区域的大小（单位为dp），和 showSystemUI 互斥。
device	预览机型（Devices.DESKTOP、Devices.PIXEL_4、Devices.NEXUS_6）。
apiLevel	预览不同版本的效果

@Preview
@Composable
fun WrapperShow() {
    Show("Word")    //包裹一层再传个值
}

@Composable
fun Show(str: String) {
    Text(text = "Hello ${str}!")
}

3.1 对屏幕级组合函数使用预览失败

原因：系统无法正确实例化 ViewModel 因为它依赖于运行中的 Android 系统，而预览系统只有UI相关代码。

解决：抽离出一个只依赖于状态类的组合函数。

@Composable
fun DemoScreen(
    viewModel: DemoViewModel = viewModel(),
){
    DemoContent(viewModel.demoState)
}

@Composable
private fun DemoContent(
    demoState:DemoState
){
    /* ... */
}

@Composable
@Preview
private fun PreviewDemoContent(){
    DemoContent(remember{DemoState()})
}

3.2 引用了Android运行时才能获取的类预览失败

原因：像 Application 类在预览系统中是不存在的。

解决：通过 LocalInspectionMode.current 来判断当前是否运行于预览系统中，true就使用固定字符串。

@Composable
fun MyTest(){
    Text(
        text=if(LocalInspectionMode.current) "预览中" else MyClass.getDesc()
    )
}