compose Text和TextField简单使用Text 任何前端框架对文字的处理都是最重要的，Compose中文字

这是我参与更文挑战的第20天，活动详情查看：更文挑战

Text

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

Text使用

简单使用

代码

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

效果

修改文字样式

代码

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

效果

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

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

代码

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("重要的事另起一行说：因为说实话，我只是个菜鸟")
            }
        }
      

    })
}

效果

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

第一行显示两种样式的文字，这需要两个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//获取焦点时候边框的颜色

                )
        )

效果：

首发后补充

TextField状态保存

当我们使用remember保存TextField状态的时候，如果当前页面被覆盖后再次返回TextField中的数据会被清空，

var userName by remember {
    mutableStateOf("")
}

如果想不被清空需要使用rememberSaveable

var userName by rememberSaveable {
    mutableStateOf("")
}

TextField重要属性

输入模式

visualTransformation//默认：VisualTransformation.None；密码输入：PasswordVisualTransformation()

自定义TextField（20220404）

# Compose 自定义TextField实现自定义的输入框

Text如何设置超出字数省略号展示

代码如下，使用overflow进行设置，注意一定要设置maxLines才能进行省略号展示

Text(
    text = "安安安安卓，一个专注传不android知识的螺丝钉,欢迎关注公众号：安安安安卓",
    overflow = TextOverflow.Ellipsis,
    maxLines = 2,
    style = TextStyle(fontSize = 30.sp)
)

overflow还有另外两个枚举：

TextOverFlow.Clip
TextOverFlow.Visible

Compose更改输入框键盘回车键行为的方式（20220404）

代码

关键就是下面的三个属性：其中keyboardOption用来设置输入的内容类型和返回键展示的样式 keyboardActions用来展示回车键被点击相应的行为后的回调方法 singleLine=true尤其要设置单行为true，否则回车键的行为图标不会发生改变

singleLine = true, keyboardOptions = KeyboardOptions(
    keyboardType = KeyboardType.Text,
    imeAction = actionData.imeAction
), keyboardActions = KeyboardActions(
    onDone = {
        showToast("onDone")
    },
    onGo = {
        showToast("onGo")
    },
    onNext = {
        showToast("onNext")
    },
    onPrevious = {
        showToast("onPrevious")
    },
    onSearch = {
        showToast("onSearch")
    },
    onSend = {
        showToast("onSend")
    }
)

github.com/ananananzhu…

实现效果

compose软键盘回车键行为更改.gif

compose Text和TextField简单使用