Compose的环境配置(一)

已于 2024-03-05 10:44:36 修改
阅读量3k 收藏 3
点赞数
分类专栏： JetPack Android kotlin 文章标签： android kotlin
于 2021-05-14 22:25:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Tony/article/details/116808527
版权
Android 同时被 3 个专栏收录
134 篇文章 3 订阅
订阅专栏
JetPack
86 篇文章 36 订阅
订阅专栏
kotlin
32 篇文章 2 订阅
订阅专栏

文章目录

一、前言

现在是2021年5月14日，今天着手开始进行Compose的学习，本觉得出来也很久了。各方面教程比较完善了，但是还是遇到了很多问题，这里将过程总结一下。在实际学习中发现Compose第一个正式版本其实还没有出来，所以等到后面正式版本出来后，不知道是否还需要进行更改。另外Compose预览这个功能现在还是Canary版本，正式版本的Android Studio是没法使用的，所以写完后如果想看效果只能安装下程序了

二、依赖配置

由于现在Compose还没有正式版本，因此，在有新版本时候需要及时的更新到最新版本，否则可能会导致程序无法编译

  • 开发语言：kotlin，因为Compose没有Java版本，所以只能使用kotlin进行开发。

  • 最低支持版本：21

      defaultConfig {
          ...
          minSdkVersion 21
          ...
      }
  • kotlin最低版本：1.5.10
 buildscript {
      ext.kotlin_version = "1.5.10"
      repositories {
          google()
          jcenter()
      }
      dependencies {
          classpath 'com.android.tools.build:gradle:4.2.2'
          classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
      }
  }

以上是基本的版本配置，但是我在使用的时候用的是最新版本，另外还有一些其他的配置，所以完整配置如下：

./rootProject/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.5.10"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

./rootProject/gradle/wrapper/gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-bin.zip

./rootProject/app/build.gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.test.compose"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose 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'
    }
    composeOptions {
    //这里面的版本是相互匹配的，而这个编译版本又跟dependencies中的依赖版本匹配
        kotlinCompilerExtensionVersion '1.0.0-rc01'
        //这个版本必须写，否则使用的kotlin版本可能不是这个版本。就会编译失败
        kotlinCompilerVersion "1.5.10"
    }
    //具体参考这个链接进行比较版本，[这里](https://developer.android.com/jetpack/androidx/releases/compose-kotlin)
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    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.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-rc01'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-rc01'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-rc01'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-rc01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-rc01'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.0-rc01'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-rc01'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-rc01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-rc01'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-rc01'
}

三、示例代码

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_main)
        setContent {
            content()
        }
    }
	
	@Preview
    @Composable
    fun content(){
        Text(
            text = "你好啊"
        )
    }
}

	@Preview
    @Composable
    fun ContentTop(){
        Text(
            text = "你好啊"
        )
    }

需要注意的是，如果使用@Preview进行预览的话，必须要有默认构造函数或者在顶层代码里面，否则会出错，错误提示如下:

Preview must be a top level declarations or in a top level class with a default constructor.

比如如下代码就有问题，没法预览

class BottomDialog(val string: String)  : BottomSheetDialogFragment() {
    @Preview(showBackground = true)
    @Composable
    fun GetTest(){
        Text(text = "你好啊")
    }

}

需要修改为以下方式:

class BottomDialog  : BottomSheetDialogFragment {

    constructor(): super(){

    }

    @JvmOverloads
    constructor(string: String): this(){

    }

    @Preview(showBackground = true)
    @Composable
    fun GetTest(){
        Text(text = "你好啊")
    }

}

或者将预览的代码移动到类外面去

class BottomDialog  : BottomSheetDialogFragment {
	...
}
   @Preview(showBackground = true)
    @Composable
    fun GetTest(){
        Text(text = "你好啊")
    }

四、总结

这里走了一些弯路，最大的问题就是官网上文档可能没跟得上更新，有些地方没办法使用。

1、各个依赖的版本问题，依赖版本需要和kotlin版本匹配，不匹配的话编译一直失败。

2、其次就是添加一个插件一直编译出错，后来发现不写也没事，

plugins {
  id 'org.jetbrains.kotlin.android' version '1.5.10'
}

3、需要添加一句话，要不然依赖可能会使用不知道哪的版本,就会出现版本冲突

   composeOptions {
      	...
        //这个版本必须写，否则使用的kotlin版本可能不是这个版本。就会编译失败
        kotlinCompilerVersion "1.5.10"
    }

五、最新版本配置

当前时间为2024年1月12日
Android Studio版本:

Android Studio Hedgehog | 2023.1.1 Patch 1
Build #AI-231.9392.1.2311.11255304, built on December 27, 2023
Runtime version: 17.0.7+0-17.0.7b1000.6-10550314 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 14.2.1
GC: G1 Young Generation, G1 Old Generation
Memory: 4096M
Cores: 8
Metal Rendering is ON
Registry:
    external.system.auto.import.disabled=true
    debugger.new.tool.window.layout=true
    ide.text.editor.with.preview.show.floating.toolbar=false
    ide.experimental.ui=true
    ide.images.show.chessboard=true

Non-Bundled Plugins:
    Gradle View (4.0.0)
    com.github.gitofleonardo.simplesqlitebrowser (1.0.7)
    idea.plugin.protoeditor (231.9225.5)
    com.developerphil.adbidea (1.6.11)

项目根目录下面gradle配置:

buildscript {
    ext {
        compose_version = '1.5.4'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '8.2.1' apply false
    id 'com.android.library' version '8.2.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.9.22' apply false
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

gradle-wrapper.properties配置

#Thu Jun 02 10:33:23 CST 2022
distributionBase=GRADLE_USER_HOME
distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
distributionPath=wrapper/dists
zipStorePath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME

app下吗gradle配置

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 34

    defaultConfig {
        applicationId "com.design.compose"
        minSdk 21
        targetSdk 34
        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_18
        targetCompatibility JavaVersion.VERSION_18
    }
    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_18
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion "1.5.8"
        kotlinCompilerVersion "1.9.22"
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }

    namespace 'com.design.compose'
}

dependencies {

    implementation 'androidx.core:core-ktx:1.12.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.material3:material3"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"


    implementation("androidx.activity:activity-compose:1.8.1")
    implementation(platform("androidx.compose:compose-bom:2023.03.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")

    implementation "androidx.paging:paging-compose:3.2.1"
    implementation "androidx.paging:paging-compose-android:3.3.0-alpha02"
    implementation "androidx.paging:paging-runtime-ktx:3.2.1"
    implementation "androidx.paging:paging-common-ktx:3.2.1"
    implementation "androidx.room:room-paging:2.6.1"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.2'
    implementation 'androidx.activity:activity-compose:1.8.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}

六、参考链接:

  1. compose版本：https://developer.android.google.cn/jetpack/androidx/releases/compose?hl=en#versions
  2. Compose配置：https://developer.android.google.cn/jetpack/compose/setup
  3. Compose教程：https://developer.android.google.cn/courses/pathways/compose
  4. Google为Compose开发的拓展库https://google.github.io/accompanist/flowlayout/
  5. compose版本兼容性处理
  6. Jetpack Compose 博物馆,记录了所有的控件
  7. Compose学习-基础控件
  8. compose
  9. 沉浸式状态栏处理
  10. android Compose中沉浸式设计和导航栏的处理
  11. 三步走实现 Compose 沉浸式状态栏
  12. Compose 中的窗口边衬区
  13. dialog
  14. 源码中material3 的API
  15. compose 自身提供的组件UI示例
  16. material3的官网UI示例
Mr_Tony
关注
专栏目录
学习 Compose 系列（一）环境配置、概念理解、初体验
Hanks软件库
06-11 420
Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。 Compose 作为一条新的构建界面的工具，不同于原来解析 xml 生成，应用开发方式也与原来不同，需要重新理解其原理。Compose 放在 Jetpack 中，和 ViewModel LiveData 结合，目标是开发更高效，应用更健壮。官网地址 之前通过 kotlin + xml 编写UI界.
docker-compose环境变量配置
Star_Inori的博客
04-01 3875
docker-compose变量配置
【自学Jetpack Compose 系列】Compose 介绍以及开发环境搭建与项目创建
大模型学习路线
05-23 3104
1. Compose简介 从2019年5月Google在I/O大会上公布Compose，到2020年9月发布第一个Alpha版本， 在到2021年2月发布第一个Bate版本，间隔了近两年，那么Compose究竟是什么呢？ Jetpack Compose是一个UI工具包， 熟悉Flutter和SwiftUI的同学都知道，他们的写法及其类似，因为我之前就做过Flutter开发，所以对于Jetpack Compose库有种莫名的亲切感。 Jetpack Compose 是用于构建原生 Android 界面的新工具
Android compose 的基本环境搭建
最新发布
qq_53374893的博客
09-26 1102
导入版本。
【docker-compose】安装及配置
lorogy的博客
04-09 1695
centos7默认防火墙为firewalld，而不是iptables,而docker使用iptables来做端口映射，所以一旦将firewalld关闭，则会报错。千万不要移除mysql容器重启，虽然密码生效了，但是删库，所有数据都没了。：修改后的密码无法连接mysql，但旧密码依然可以。有一次离线部署，docker官方mysql镜像。：启动防火墙，并一定注意开放平台访问的端口。主要借助docker-compose的。无法成功，改为bitnami版才成功。：因为带有旧有登录信息的卷依然在。
常用工具docker-compose配置
weixin_41677187的博客
07-14 151
【代码】常用工具docker-compose配置。
Docker-Compose配置文件docker-compose.yml详解
高压锅博客
04-12 4297
一份标准的docker-compose.yml文件应该包含version、services、networks三大部分，其中最关键的就是services和networks两个部分。目前主流的为 3.x 其支持 docker 1.13.0 及其以上的版本。Compose 文件格式有3个版本,分别为1, 2.x 和 3.x。
Android项目中使用Compose的配置前提
qq_44874325的博客
12-05 761
android compose
docker-compose部署配置jenkins的详细教程
01-09
Docker Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。在本教程中，我们将使用 Docker Compose 部署 Jenkins，一个流行的持续集成和持续交付(CI/CD)平台。 1. **Docker Compose 文件配置**： 在 `...
Compose中的环境变量
ystyaoshengting的专栏
10-17 699
There are multiple parts of Compose that deal with environment variables in one sense or another. This page should help you find the information you need. Compose有多个部分以一种或另一种方式处理环境变量。 该页面应帮助您找到所需的信息。...
docker-compose 配置spring环境的方法步骤
01-10
最近需要打包项目给成员们进行测试，但打包运行后很影响开发，于是打算使用docker模拟生产环境运行打包后的项目，这样就能既开发，又能给成员进行测试了。 由于原项目过大，打算先拿软件...我们都知道，使用一个Docke
compose配置文件参数详解
hellozhxy的博客
05-09 2407
本文介绍compose配置文件参数的使用，熟练编写compose文件[root@docker lnmp]# cat lnmp.yaml version: '3' services: nginx: build: /root/docker_demo/nginx/ ports: - "80:80" links: - php:php volume...
使用docker-compose搭建各种环境
小董的博客
08-20 883
前提: 操作环境: windows11 使用工具: docker desktop 搭建环境: mysql, redis, pgsql附自身的配置文件以及挂在文件夹: https://gitee.com/dongxinlong66/docker-compose-environment 启动服务 在终端中进入到文件所在目录，然后执行以下命令启动服务： 注意，由于我使用的挂在数据。所以需要提前创建好挂载目录。且挂载目录的权限需要设置为777，否则会出现权限问题。 且当下的docker-compose.yml文件中
Android为现有的应用工程设置 Compose
ChinaDragon10的博客
02-20 839
Android为现有的应用设置 Compose
Android的Compose
qq_44016573的博客
02-19 5227
如果需要将一个函数转换为Composable function，我们需要添加注解“@Composable”。) {MessageCard("Android")//使用我们自定义的Composable function@Composable//添加注解，使该函数成为Composable function")
『Android』如何配置 Jetpack-Compose 环境
ReturnTmp的博客
04-07 655
但是，这里为这些插件指定版本号是有用的，因为在子项目中应用这些插件时，Gradle 将会根据指定的版本号下载和使用相应的插件。如果不指定版本号，Gradle 将会默认使用最新版本的插件，这可能会导致不可预期的问题。第二种方式虽然也能实现同样的功能，但是需要指定更多的插件，并且代码看起来比较冗长。注意：里面的kotlin版本需要和自己的 gradle 版本 对应的Compose Complier版本适配，如果不适配，build时会提示适配版本，然后改为相应版本即可。命名空间下的插件，所以可以省略命名空间。
三、Docker：Compose安装、使用、文件结构、配置参数与命令详解
SteveRocket's-Blog
03-22 8064
Docker-compose 是用于定义和运行多容器 Docker 应用程序的编排工具。使用 docker-compose 后不再需要逐一创建和启动容器。可以使用YML文件来配置应用程序需要的所有服务，然后使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。在配置文件中，所有的容器通过services来定义，然后使用docker-compose脚本来启动，停止和重启应用，和应用中的服务以及所有依赖服务的容器，非常适合组合使用多个容器进行开发的场景。一个使用Docker容器的应用，通常由多个容器组成
docker-compose yml配置lnmt环境
04-25
在这个场景中，我们讨论的是如何使用Docker Compose配置一个LNMT（Linux, Nginx, MySQL, PHP-FPM）环境。LNMT是一种常见的Web开发和部署堆栈，用于构建动态网站和应用程序。 首先，`docker-compose.yml`文件是...
docker-compose 配置
热门推荐
AggressionStorm的博客
08-23 20万+
文章目录官方文档Docker Compose 配置文件详解1. image2. build3. command4.container_name5.depends_on6.dns7. tmpfs8. entrypoint9.env_file10. environment11. expose12. external_links13. extra_hosts14. labels15. links16. ...
Android JetPack Compose详解 Compose的设计原理和概念（从入门到入土）
m0_56255097的博客
02-28 590
Android jetpack compose详解，compose的设计原理和概念
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值