Jetpack-Compose

最新推荐文章于 2024-08-22 17:57:40 发布

路很长oO

最新推荐文章于 2024-08-22 17:57:40 发布

阅读量2.1k

点赞数 2

分类专栏： Android UI 文章标签： Jetpack-Compose Compose Composer Jetpack Flutter-Compose

本文链接：https://blog.csdn.net/m0_37667770/article/details/114542808

版权

本文详细介绍了Jetpack Compose的环境配置，包括Android Studio版本、Gradle配置等。接着，深入探讨了Compose的布局组件，如行和列的使用，以及文字、图片、点击事件的处理。文章提到了UI刷新机制，并展示了如何自定义绘制和处理列表。通过案例分析，解释了如何实现复杂UI，包括图片、文字、输入框的布局和交互。总结中指出，Compose类似SwiftUI和Flutter，提供了高效布局能力，但也存在Kotlin高阶函数的学习挑战。

摘要由CSDN通过智能技术生成

一、什么都不如官网来的直接

Jetpack Compose去年写了一些列表布局就丢下了,以前一个小兄弟说“什么都不如官网来的直接”这是他的博客打算用Compose写玩安卓大家可以去好好学习一波,接下来我们跟着官网走,原理案例基于官网,写的效果高于官网。Flutter,SwiftUI对比这些众说风云,人云亦云,我不多说,XML相对于当前流行的前段或者移动端布局组建框架都不在是优势,既然Google推出的那我们就学。

二、环境

1.AndroidSdio Beta 4.2版本或者Canary版本

版本提供有好的界面预览-即时预览 Compose 界面

2.确保您在项目中使用的是`Kotlin 1.4.21` 或更高版本

项目build.gradle里面配置:

 buildscript {
   
    ext {
   
        compose_version = '1.0.0-alpha04'
    }
    //大于1.4.12版本
    ext.kotlin_version = "1.4.30"
    repositories {
   
        google()
        jcenter()
    }
    dependencies {
   
        classpath 'com.android.tools.build:gradle:4.2.0-beta05'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

3.app下面的build.gradle配置如下:

最低 API 级别设置为 21 或更高级别
并在应用的 build.gradle 文件中启用 Jetpack Compose
添加 Jetpack Compose 工具包依赖项

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdkVersion 30

    defaultConfig {
        applicationId "com.example.jetpackcompose"
        minSdkVersion 21//最低 API 级别设置为 21 或更高级别
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    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//并在应用的 build.gradle 文件中启用 Jetpack Compose
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.10'
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0-alpha06'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

创建项目
MainActivity.class

package com.example.jetpackcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.*
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
   
    override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        setContent {
   
            Text("Hello World")
        }
    }
}

三、Layouts

官网地址组件学习

接下来我们学习-如何使用Compose构建简单的UI布局，如文本,图片之类的组件以及列和行之类的容器布局组件,不管是Flutter、SwiftUI、HTML、Compose…只要学会最基本的行和列加个Stack,基本就能够搞定所有的布局样式了,至于细节和不常用的组建看属性、看官网、看百度即可直接上手。

Jetpack Compose 是围绕可组合函数构建的,所有的部件都是Compose,只需将 @Composable 注释添加到函数名称中即可。

一、文字相关属性和案例

我们来看看官方库提供的Text被@Composeable也注解成为可组合组建。内部定义了很多我们熟悉的属性提供开发者设置。

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unset,
    fontSize: TextUnit = TextUnit.Inherit,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Inherit,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Inherit,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {
   },
    style: TextStyle = currentTextStyle()
) {
   
    Text(
        AnnotatedString(text),
        modifier,
        color,
        fontSize,
        fontStyle,
        fontWeight,
        fontFamily,
        letterSpacing,
        textDecoration,
        textAlign,
        lineHeight,
        overflow,
        softWrap,
        maxLines,
        emptyMap(),
        onTextLayout,
        style
    )
}

到现在是不是迫不及待的想写一个TextView呢？

class ComposeStudy_01 : AppCompatActivity() {
   
    override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        setContent{
   
            Text("Hello World")
        }
    }
}

既然提供了这么多的属性我们不妨试一试常用的颜色、字体大小、边框、字体样式、间距、加粗等

⭐️ 这里需要注意的是属性默认可以不写参数名称按照参数顺序从上到下,但是如果你要跳级设置其中两三个或多个需要写参数名哦,这样才能对应负值，给初学者的提示。

   class ComposeStudy_01 : AppCompatActivity() {
   

    override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        setContent {
   
            Text(
                text = "    Hello World",
                //`边框`
                modifier = Modifier.border(
                    border = BorderStroke(
                        width = 3.dp,
                        color = Color(0xFF999999),
                    ),
                    shape = RoundedCornerShape(20f, 60f, 20f, 160f),
                ),
                //`颜色`、
                color = Color.Green,
                //`字体大小`、
                fontSize = TextUnit.Sp(66),
                //字形的厚度
                fontWeight = FontWeight.Bold,
                //斜体
                fontStyle = FontStyle.Italic,
                fontFamily = FontFamily.Default,
                //字体水平间隔
                letterSpacing = TextUnit.Em(0),
                //在文本上方绘制一条水平线
                textDecoration = TextDecoration.LineThrough
            )
        }
    }
}

二、文字分装

既然Jetpack Compose是围绕可组合函数构建的。那我们接下来写个通用的文字组建通过@Compose

    override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        setContent {
   
            myText("    Hello World")
        }
    }
    @Composable
    private fun myText(text:String) {
   
        Text(
            text = text,
            //`边框`
            modifier = Modifier.border(
                border = BorderStroke(
                    width = 3.dp,
                    color = Color(0xFF999999),
                ),
                shape = RoundedCornerShape(20f, 60f, 20f, 160f),
            ),
            //`颜色`、
            color = Color.Green,
            //`字体大小`、
            fontSize = TextUnit.Sp(66),
            //字形的厚度
            fontWeight = FontWeight.Bold,
            //斜体
            fontStyle = FontStyle.Italic,
            fontFamily = FontFamily.Default,
            //字体水平间隔
            letterSpacing = TextUnit.Em(0),
            //在文本上方绘制一条水平线
            textDecoration = TextDecoration.LineThrough
        )
    }

是不是觉得这样写Activity还不是和Flutter一样套娃娃,当然不管是Compose还是Flutter或者SwiftUI我们都可以将其放在其他文件中进行分离封装。如下我们新建文件和类夹专门放置我们的UI。

三、`Modifier`

当我用到Modifier的时候我很惊叹,这不是SwiftUI么？于是我快速的打开了Xcode

Modifier用于装饰Compose UI元素或向其添加行为。例如，背景，填充和单击事件侦听器可修饰行或添加行，文本或按钮的行为。

1.`Modifier`来添加点击事件

当我点击时候修改当前字体的颜色,我们看到Modifier可以设置clickable,接下来我们进行Modifier的探究。当我双击时候为红色,单机时候为绿色。

如下代码
1.设置了局部变量color默认为绿色
2.当单机时候设置为黄色
3.双击为红色

@Composable
fun myText(text: String) {
   
    var color = Color.Green
    Text(
        text = text,
        //`边框`
        modifier = Modifier.border(
            border = BorderStroke(
                width = 3.dp,
                color = Color(0xFF999999),
            ),
            shape = RoundedCornerShape(20f, 60f, 20f, 160f),
        ).clickable(
            onClick = {
    color = Color.Yellow },
            onDoubleClick = {
    color = Color.Red }
        )...    
    }

运行代码,点击效果如下:并不能修改效果呀!此时很多学习过Flutter和SwiftUI的人都明白你并没有刷新UI咋么可能有所改变呢。那在Compose里面是否有提供如Flutter setState一样的组件。

我想对于有基础的同学modifier我就不多啰嗦了。到这里我终于可以认真的说一句真的很SwiftUI至于是否自定义也和SwiftUI一直这个我们后面章节再讨论和深究，如果没有了很好的自定义画布这些API的提供也就走上了和SwiftUI一样的道路,这一点让我深恶痛绝。

modifier = Modifier.clickable(
            onClick = {
   
                nameState.value=Color.Yellow
           },
            onDoubleClick = {
   
                //2.点击之后事件向上流动修改状态值
                nameState.value=Color.Red
            }
        ).background(Color.Gray,shape = RectangleShapes)
        .