快捷導(dǎo)航

Jetpack?Compose?Text的基本使用

更新時(shí)間：2022年09月30日 09:34:04 作者：toskyline

這篇文章主要介紹了Jetpack?Compose?Text的基本使用，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

Text

文字是任何界面必須的元素，Compose Text 可組合項(xiàng)，通過(guò)設(shè)置文字、大小、顏色可以實(shí)現(xiàn)各種文字效果。

Text的基本用法如下：

@Composable
fun Text(
????//要顯示的文字
    text: String,
????//修飾符
    modifier: Modifier = Modifier,
????//文字顏色
    color: Color = Color.Unspecified,
????//文字大小
    fontSize: TextUnit = TextUnit.Unspecified,
????//文字樣式,正常或者斜體
    fontStyle: FontStyle? = null,
????//字重，范圍：1~1000之間
    fontWeight: FontWeight? = null,
????//字體
    fontFamily: FontFamily? = null,
????//字幕之間間距
    letterSpacing: TextUnit = TextUnit.Unspecified,
????//文字裝飾，下劃線、中劃線或者None
    textDecoration: TextDecoration? = null,
????//文字對(duì)齊方式
    textAlign: TextAlign? = null,
????//行高
    lineHeight: TextUnit = TextUnit.Unspecified,
????//溢出處理方式，裁剪、省略號(hào)或者正常顯示
    overflow: TextOverflow = TextOverflow.Clip,
????//是否處理?yè)Q行符
    softWrap: Boolean = true,
????//最大行數(shù)
    maxLines: Int = Int.MAX_VALUE,
????//計(jì)算文本布局時(shí)的回調(diào)
    onTextLayout: (TextLayoutResult) -> Unit = {},
????//文本樣式,顏色、字體等
    style: TextStyle = LocalTextStyle.current
)

基本使用

@Composable
fun TextCommon() {
    Text(
        "Hello World",
        color = Color.Blue,
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .width(150.dp)
            .background(Color(0xff44D1FD)),
        fontFamily = FontFamily.SansSerif,
        fontStyle = FontStyle.Italic,
        textDecoration = TextDecoration.LineThrough,
        style = TextStyle.Default
    )
}

通過(guò)簡(jiǎn)單設(shè)置字體、顏色、文字大小 等就能滿足我們的基本要求。

效果如下：

富文本顯示

如果需要顯示不同的文字樣式，就必須用到 AnnotatedString，通過(guò) buildAnnotatedString()可以實(shí)現(xiàn)各種富文本的顯示。

@Composable
fun RichText() {
   Text(
       buildAnnotatedString {
           withStyle(style = SpanStyle(color = Color.Blue)) {
               append("H")
           }
           append("ello ")
           withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
               append("W")
           }
           append("orld")
           withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
               withStyle(style = SpanStyle(color = Color.Blue)) {
                   append("Hello\n")
               }
               withStyle(
                   style = SpanStyle(
                       fontWeight = FontWeight.Bold,
                       color = Color.Red
                   )
               ) {
                   append("World\n")
               }
               append("Compose")
           }
       }, modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD))
   )
}

通過(guò)buildAnnotatedString() + withStyle() 設(shè)置不同位置的，顯示不同效果。

效果如下：

文字部分可選

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column(modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD))) {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

默認(rèn)情況下，Compose可組合項(xiàng)不可以選擇，要啟用選擇，需要使用SelectionContainer包裹文字組合。你也可以選擇在部分區(qū)域禁止選擇，DisableSelection包裹文字部分就可以實(shí)現(xiàn)部分不可選。效果如下：

可點(diǎn)擊文字

@Composable
fun AnnotatedClickableText() {
    val context = LocalContext.current
    val annotatedText = buildAnnotatedString {
        append("Click ")
        pushStringAnnotation(tag = "URL", annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {
            append("here")
        }
        pop()
    }
    ClickableText(
        modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD)),
        text = annotatedText,
        onClick = { offset ->
            annotatedText.getStringAnnotations(tag = "URL", start = offset, end = offset)
                .firstOrNull()?.let { annotation ->
                    // If yes, we log its value
                    Log.d("Clicked URL", annotation.item)
                    val uri = Uri.parse(annotation.item)
                    val intent = Intent(Intent.ACTION_VIEW, uri)
                    context.startActivity(intent)
                }
        }
    )
}

通過(guò)pushStringAnnotation() 設(shè)置tag,然后在ClickableText 的onClick 回調(diào)處理點(diǎn)擊事件。效果如下：

TextField

TextField 允許用戶輸入文字，TextField 是 BasicTextField 的簡(jiǎn)單封裝，包含了各種裝飾。

@Composable
fun SimpleFilledTextField() {

    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") },
        placeholder = { Text("placeholder") },
        leadingIcon = { Text("leadingIcon") },
        trailingIcon = { Text("trailingIcon") },
        isError = true,
        modifier = Modifier
            .padding(start = 10.dp, end = 10.dp)
            .fillMaxWidth(),
        maxLines = 10,
        singleLine = false,
        keyboardActions = KeyboardActions(
            onDone = {

            },
            onNext = {

            },
            onPrevious = {

            },
            onSearch = {

            },
            onSend = {

            },
            onGo = {

            }
        ),
        keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters,
            autoCorrect = true,
            keyboardType = KeyboardType.Number,
            imeAction = ImeAction.Search
        ),
        readOnly = false
    )

}

BasicTextField

@Composable
fun Search() {
    var key by remember {
        mutableStateOf("")
    }
    Box(modifier = Modifier.padding(end = 35.dp)) {
        Row(
            modifier = Modifier
                .padding(top = 10.dp, bottom = 10.dp)
                .fillMaxSize()
                .clip(CircleShape)
                .background(Color.White),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                painter = painterResource(id = com.zjp.common.R.drawable.search),
                contentDescription = "search", tint = Color.Gray,
                modifier = Modifier.padding(start = 10.dp)
            )
            BasicTextField(
                value = key,
                onValueChange = {
                   key = it
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 10.dp, end = 30.dp)
                    .align(Alignment.CenterVertically),
                textStyle = TextStyle(
                    textAlign = TextAlign.Justify,
                    fontSize = 20.sp,
                    color = Color.Black.copy(alpha = 0.8f)
                ),
                singleLine = true,
                cursorBrush = SolidColor(Color.Red),
                keyboardActions = KeyboardActions(
                    onSearch = {

                    }
                ),
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Search
                ),
                decorationBox = { innerTextField ->
                    Box() {
                        if (key.isEmpty()) {
                            Text("搜點(diǎn)啥", color = Color.Gray, fontSize = 20.sp)
                        }
                        innerTextField()  //<-- Add this
                    }
                }
            )
        }
        if (key.isNotEmpty()) {
            Icon(
                painter = painterResource(id = android.R.drawable.ic_menu_close_clear_cancel),
                contentDescription = "close",
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 10.dp)
                    .clickable { key = "" },
                tint = Color.Gray
            )
        }
    }
}

與TextField 相比，BasicTextField 沒(méi)有 leadingIcon、placeholder、trailingIcon 等裝飾，你可以通過(guò)配合其他科組合項(xiàng)，實(shí)現(xiàn)不同的效果。

簡(jiǎn)單搜索框效果如下：