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") } ) 复制代码
实现效果
