compose Text简单使用

Text

任何前端框架对文字的处理都是最重要的，Compose中文字的展示和文字的编辑分别使用的Text控件和TextField控件实现。

Text使用

简单使用

1. 代码

@Composable
fun SimpleText() {
  Text("Hello World")
}

3. 效果

修改文字样式

1. 代码

 Text(
        text = "Hello $name!",
        color = Color.Green,//文字颜色
        fontSize = 40.sp,//文字字体大小
        fontStyle = FontStyle.Italic,//斜体
        fontWeight = FontWeight.Bold,//文字加粗
        modifier = Modifier.fillMaxSize(1f)
    )

2. 效果

实现一段文字中添加多样式

Compose中使用AnnotatedString可以在同一段文字中添加多种样式。

1. 代码

fun Greeting2(name: String) {
    Text(text = buildAnnotatedString {
        withStyle(style = SpanStyle(color = Color.Red, fontSize = 20.sp)) {// SpanStyle类似于Span标签，是行内元素
            append("公众号：")
        }
        withStyle(style = SpanStyle(color = Color.Green, fontSize = 20.sp)) {
            append("安安安安卓")
        }

        withStyle(style = ParagraphStyle()) {//类似p标签独占一行
            withStyle(style = SpanStyle(color = Color.Cyan, fontSize = 20.sp)) {//ParagraphStyle不能设置颜色，所以这里要再套一层Style
                append("重要的事另起一行说：因为说实话，我只是个菜鸟")
            }
        }
      

    })
}

2. 效果

本例中做了这样一个事情：

第一行显示两种样式的文字，这需要两个SpanStyle，因为SpanStyle是行内元素，所以两者会水平排列。

后面的文字我们认为比较重要，所以我们需要独占一行，因为ParagraphStyle是块元素，所以轻松实现独占一行的效果。

选择文字

要启用文字选择，需要使用 SelectionContainer

这属于比较偏僻的知识了，不展开讲，有个印象就行。

TextField

  TextField(
            value = text.value,
            onValueChange = {
                text.value = it
                Log.e("tag", it)
            },
            modifier = Modifier
                .fillMaxWidth(0.8f),
            label = { Text(text = "哈哈") },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Red,//文字颜色
                backgroundColor = Color.Green,//背景颜色
                cursorColor = Color.Cyan,//光标颜色
            )
        )

效果：

OutLineTextField

 OutlinedTextField(
            value = text.value, onValueChange = {
                text.value = it
            },
            label = { Text(text = "哈哈") },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Red,
                backgroundColor = Color.Green,
                cursorColor = Color.Cyan,
                focusedIndicatorColor = Color.Transparent//获取焦点时候边框的颜色

                )
        )

效果：

关注公众号学习更多知识