美文网首页JetpackPack 知识Android 知识
Jetpack Compose 调试容易忽略的细节

Jetpack Compose 调试容易忽略的细节

作者: zcwfeng | 来源:发表于2021-08-13 13:47 被阅读0次

    Compose 容易忽略的细节

    如需为 Jetpack Compose 启用 Android Studio 特定功能,您需要在应用 build.gradle 文件中添加以下依赖项:

    implementation "androidx.compose.ui:ui-tooling:1.0.0-rc02"
    
    

    一个标准的Compose项目,gradle 完整配置

    app/build.gradle

    plugins {
        id 'com.android.application'
        id 'kotlin-android'
    }
    
    android {
        compileSdk 30
    
        defaultConfig {
            applicationId "com.example.compose_study"
            minSdk 21
            targetSdk 30
            versionCode 1
            versionName "1.0"
    
            testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
            vectorDrawables {
                useSupportLibrary true
            }
        }
    
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            }
        }
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
        kotlinOptions {
            jvmTarget = '1.8'
            useIR = true
        }
        buildFeatures {
            compose true
        }
        composeOptions {
            kotlinCompilerExtensionVersion compose_version
            kotlinCompilerVersion '1.5.10'
        }
        packagingOptions {
            resources {
                excludes += '/META-INF/{AL2.0,LGPL2.1}'
            }
        }
    }
    
    dependencies {
    
        implementation 'androidx.core:core-ktx:1.3.2'
        implementation 'androidx.appcompat:appcompat:1.2.0'
        implementation 'com.google.android.material:material:1.3.0'
        implementation "androidx.compose.ui:ui:$compose_version"
        implementation "androidx.compose.material:material:$compose_version"
        implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
        implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
        implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
        testImplementation 'junit:junit:4.+'
        androidTestImplementation 'androidx.test.ext:junit:1.1.2'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
        androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
        debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    }
    

    project/build.gradle

    // Top-level build file where you can add configuration options common to all sub-projects/modules.
    buildscript {
        ext {
            compose_version = '1.0.0'
        }
        repositories {
            google()
            mavenCentral()
        }
        dependencies {
            classpath "com.android.tools.build:gradle:7.0.0"
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
    
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
    }
    
    task clean(type: Delete) {
        delete rootProject.buildDir
    }
    

    使用互动模式,您可以采用与在设备上执行操作的类似方式与预览对象互动。互动模式被隔离在沙盒环境中(与其他预览对象隔离),在该模式下,您可以在预览对象中点击元素并输入用户输入;预览对象甚至还可以播放动画。通过使用这种模式,您可以快速测试可组合项的不同状态和手势,例如勾选或清空复选框。

    预览互动模式直接在 Android Studio 中运行,并未运行模拟器,因此存在一些限制:

    无法访问网络
    无法访问文件
    有些 Context API 不一定完全可用
    注意:此功能必须手动启用。

    调试:

    @Preview(showBackground = true, backgroundColor = 0xFF00FF00)
    调试时候我们习惯加背景色

    尺寸.dp 不是必须

    默认情况下,系统会自动选择 @Preview 尺寸来封装其内容。如需手动设置尺寸,可以添加 heightDp 和 widthDp 参数。请注意,这些值已解释为 Dp,您无需在值末尾添加 .dp

    语言:

    @Preview(locale = "fr-rFR")

    显示状态栏:

    @Preview(showSystemUi = true)

    快捷键,端输入

    Android Studio 添加了下面这些与 Compose 相关的实时模板,您可以通过输入相应的模板缩写来输入代码段,以实现快速插入:
    
    comp,用于设置 @Composable 函数
    prev,用于创建 @Preview 可组合函数
    paddp,用于以 dp 为单位添加 padding 修饰符
    weight,用于添加 weight 修饰符
    W、WR、WC,用于通过 Box、Row 或 Column 容器设置当前可组合项的呈现效果
    

    启用实验性功能
    某些功能(例如互动式预览和动画检查器)仅当您在 Android Studio 偏好设置内的“Experimental”部分中手动将其启用后,才可供您使用

    尾随 lambda

    Column(
        modifier = Modifier.padding(16.dp),
        content = {
            Text("Some text")
            Text("Some more text")
            Text("Last text")
        }
    )
    

    ---->

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
    
    

    如果没有Modifier 会更加简单

    Column {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
    

    委托属性

    class DelegatingClass {
        var name: String by nameGetterFunction()
    }
    

    其他代码可以访问此类属性,所用代码如下:

    val myDC = DelegatingClass()
    println("The name property is: " + myDC.name)
    

    当 println() 执行时,系统会调用 nameGetterFunction() 以返回字符串的值。

    当您使用状态支持的属性时,这些委托属性特别有用:

    var showDialog by remember { mutableStateOf(false) }
    
    // Updating the var automatically triggers a state change
    showDialog = true
    

    单利对象

    Kotlin 可让您轻松地声明单例,即始终有且只有一个实例的类。这些单例使用 [object 关键字]进行声明。Compose 经常使用此类对象。例如,[MaterialTheme]被定义为一个单例对象;MaterialTheme.colorsshapestypography 属性都包含当前主题的值。

    高级用法,DSL 协程

    文档中详细了解 remember 和 mutableStateOf。

    相关文章

      网友评论

        本文标题:Jetpack Compose 调试容易忽略的细节

        本文链接:https://www.haomeiwen.com/subject/aaidbltx.html