Jetpack Compose 基础组件学习2.0

1、kotlin版本修改问题修改

修改kotlin的版本：从1.6.0到2.1.0后出现问题

问题：
在查看Compose的preView时出现问题：

Starting in Kotlin 2.0, the Compose Compiler Gradle plugin is required
when compose is enabled. See the following link for more information

问题原因：
Kotlin 2.0 的兼容性变更：从 Kotlin 2.0 起，Compose 编译器不再内置于 Kotlin Gradle 插件中，必须独立声明。
未正确配置插件：项目可能缺少 kotlin(“plugin.compose”) 或版本不匹配。
问题解决：
在build.gradle.kts(:app)和项目集的build.gradle中添加plugin插件，注意版本和kotlin的版本一致
compose-android = {id = “org.jetbrains.kotlin.plugin.compose”,version.ref = “kotlin”}

//设定内容控制在顶部状态栏以下
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
}
Text文字控件的使用

2、前言：

之前学习了Compose的布局，对XML布局中常见的布局有了一定的了解，接下来了解具体的控件，学习Text组件的使用。同样的是，学习compose博物馆中总结，在既有的基础上进行学习，将不懂的知识点进行梳理，或者版本升级后的修改进行记录。

参考知识点：

Text布局组件
对于Text的基础使用可以访问上述链接进行学习

3、文字超链接的实现

文字超链接的使用（旧版ClickableText实现）

新版实现（Text + AnnotatedString实现效果）

因为 getStringAnnotations API在不同版本中效果不同，当Compose 版本 ≥ 1.2.0时，使用Text + AnnotatedString实现效果，版本低于1.2.0的时候使用ClickableText进行实现。

@Composable
fun ClickableTextWithAnnotations() {
    val context = LocalContext.current

    // 步骤1: 构建带有注解的字符串
    val annotatedText = buildAnnotatedString {
        append("我已阅读并同意")

        // 标记可点击的起始位置
        pushStringAnnotation(
            tag = "agreement", // 自定义标签（用于识别点击区域）
            annotation = "https://example.com/terms" // 携带的数据
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append("《用户协议》")
        }
        pop() // 结束标记

        append("和")

        pushStringAnnotation(tag = "privacy", annotation = "https://example.com/privacy")
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append("《隐私政策》")
        }
        pop()
    }

    // 步骤2: 获取文本布局信息
    val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }

    // 步骤3: 组合 Text 和点击检测
    Text(
        text = annotatedText,
        modifier = Modifier
            .fillMaxWidth()
            .pointerInput(Unit) {
                detectTapGestures { offset ->
                    layoutResult.value?.let { layout ->
                        // 获取点击位置的字符索引
                        val position = layout.getOffsetForPosition(offset)
                        
                        // 检查是否点击了注解区域
                        annotatedText.getStringAnnotations(
                            start = position,
                            end = position
                        ).firstOrNull()?.let { annotation ->
                            when (annotation.tag) {
                                "agreement" -> {
                                    // 处理用户协议点击
                                    Toast.makeText(
                                        context,
                                        "打开协议: ${annotation.item}",
                                        Toast.LENGTH_SHORT
                                    ).show()
                                }
                                "privacy" -> {
                                    // 处理隐私政策点击
                                    Toast.makeText(
                                        context,
                                        "打开隐私: ${annotation.item}",
                                        Toast.LENGTH_SHORT
                                    ).show()
                                }
                            }
                        }
                    }
                }
            },
        onTextLayout = { layoutResult.value = it }
    )
}

4、文字强调效果（ Material3 的透明度方案）

material依赖实现文字强调效果：

// 将内部 Text 组件的 alpha 强调程度设置为高
// 注意: MaterialTheme 已经默认将强调程度设置为 high
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Text("这里是high强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为中
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text("这里是medium强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为禁用
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Text("这里是禁用后的效果")
}

material的依赖：

implementation(libs.androidx.compose.material)


//libs.versions.toml中
composeMaterial = "1.4.3"
androidx-compose-material = { group = "androidx.compose.material", name = "material", version.ref = "composeMaterial" }

material3的依赖：

implementation(libs.androidx.material3)

//libs.versions.toml中

androidx-material3 = { group = "androidx.compose.material3", name = "material3" }

注意：
使用material2和material同时依赖时，api会产生冲突，上述实现不起作用，不能同时依赖material和material3.

material依赖实现文字强调效果：

 Text(
        text = "禁用文本",
        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 1.0f)
            )

5、委托属性

添加导入包

// 必须导入的扩展函数（解决委托属性问题）

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

var text by remember{ mutableStateOf("")}
//取值、赋值
Text( text= text)

否则使用的是

var text = remember{ mutableStateOf("")}
//取值
Text( text= text.getValue)

//赋值
text.setValue()