如何使用 Jetpack Compose 在 Android 中更改 TextField 的突出显示文本颜色？

在 Android Jetpack Compose 中，Text 是一个 UI 元素，用于在屏幕上将字符、单词或句子显示为字符串。默认情况下，无法选择此文本进行复制。我们必须创建一个 SelectionContainer，然后在其中实现一个 Text 以使其可选择。当我们尝试从 SelectionContainer 中选择文本时，文本会以淡蓝色和蓝色手柄突出显示，一个在所选范围的左侧，另一个在右侧。在下图中观察这一点。

在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中更改选定文本突出显示颜色。 IDE 准备就绪后，请按照以下步骤操作。

分步实施

第 1 步：在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。选择模板时，选择Empty Compose Activity 。如果您没有找到此模板，请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序，因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin

package com.geeksforgeeks.jctextselectioncolors
  
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.selection.LocalTextSelectionColors
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function 
            // to display element and its contents
            MainContent()
        }
    }
}
  
// Creating a composable 
// function to display Top Bar
@Composable
fun MainContent() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("GFG | TextSelectionColors Implementation", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent() }
    )
}
  
// Creating a composable function to 
// create two Images and a spacer between them
// Calling this function as content
// in the above function
@Composable
fun MyContent(){
  
    // Create a value CustomTextSelectionColors 
    // using TextSelectionColors constructor
    // Setting the handle color to blue and background to red
    val mCustomTextSelectionColors = TextSelectionColors(
        handleColor = Color.Blue,
        backgroundColor = Color.Red
    )
  
    // Create a SelectionContainer 
    // to create a selectable text.
    SelectionContainer {
        Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
            // Normal text with no CustomTextSelectionColors
            Text(text = "Sample Text 1", fontSize = 30.sp)
  
            // Adding a spacer with 100dp height
            Spacer(modifier = Modifier.height(100.dp))
  
            // Implementing CustomTextSelectionColors
            // and declaring Text inside it
            CompositionLocalProvider(LocalTextSelectionColors provides mCustomTextSelectionColors){
                Text(text = "Sample Text 2", fontSize = 30.sp)
            }
        }
    }
}
  
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

在下图中，您将看到两个屏幕截图。在第一个中，我们选择了未应用 SelectionTextColors 的第一个文本。背景为淡蓝色，手柄默认为蓝色。在第二个屏幕截图中，我们选择了应用了 SelectionTextColors 的第二个文本。