Jetpack Compose Text基本使用

语言: CN / TW / HK

Text

文字是任何界面必须的元素,Compose Text 可组合项,通过设置文字、大小、颜色可以实现各种文字效果。Text的基本用法如下:

kotlin @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,     //文字对齐方式 textAlign: TextAlign? = null,     //行高 lineHeight: TextUnit = TextUnit.Unspecified,     //溢出处理方式,裁剪、省略号或者正常显示 overflow: TextOverflow = TextOverflow.Clip,     //是否处理换行符 softWrap: Boolean = true,     //最大行数 maxLines: Int = Int.MAX_VALUE,     //计算文本布局时的回调 onTextLayout: (TextLayoutResult) -> Unit = {},     //文本样式,颜色、字体等 style: TextStyle = LocalTextStyle.current )

基本使用

kotlin @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 ) }

通过简单设置字体颜色文字大小 等就能满足我们的基本要求。效果如下:

闪屏

富文本显示

如果需要显示不同的文字样式,就必须用到 AnnotatedString,通过 buildAnnotatedString()可以实现各种富文本的显示。

kotlin @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)) ) }

通过buildAnnotatedString() + withStyle() 设置不同位置的,显示不同效果。效果如下:

闪屏

文字部分可选

@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") } } }

默认情况下,Compose可组合项不可以选择,要启用选择,需要使用SelectionContainer包裹文字组合。你也可以选择在部分区域禁止选择,DisableSelection包裹文字部分就可以实现部分不可选。效果如下:

闪屏

可点击文字

@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) } } ) } 通过pushStringAnnotation() 设置tag,然后在ClickableText 的onClick 回调处理点击事件。效果如下:

闪屏

TextField

TextField 允许用户输入文字,TextField 是 BasicTextField 的简单封装,包含了各种装饰。

``` @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("搜点啥", 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 没有 leadingIcon、placeholder、trailingIcon 等装饰,你可以通过配合其他科组合项,实现不同的效果。简单搜索框效果如下:

闪屏

最后

文章的大部分代码来自 Compose Unit ,Compose Unit 是一个jetpack compose 可组合项的使用合集,大家可以参考该项目,了解jetpack compose 的各种基本使用指南。

关于 Compose Unit ,大家可以查看 compose Unit来啦 了解。