Compose 中的文字

关注

发布于: 2 小时前

Compose 提供了基础的 BasicText 和 BasicTextField，它们是用于显示文字以及处理用户输入的主要函数。Compose 还提供了更高级的 Text 和 TextField，它们是遵循 Material Design 准则的可组合项。

1.显示文字

最基本方法是使用以 String 作为参数的 Text 可组合项：

@Composablefun SimpleText() {  Text("Hello World")}

复制代码

显示资源中的文字：

@Composablefun StringResourceText() {  Text(stringResource(R.string.hello_world))}

复制代码

2.设置文本样式

更改文字颜色：

@Composablefun BlueText() {  Text("Hello World", color = Color.Blue)}

复制代码

@Composablefun BigText() {  Text("Hello World", fontSize = 30.sp)}

复制代码

将文字设为斜体

@Composablefun ItalicText() {  Text("Hello World", fontStyle = FontStyle.Italic)}

复制代码

将文字设为粗体

@Composablefun BoldText() {    Text("Hello World", fontWeight = FontWeight.Bold)}

复制代码

文字对齐

@Preview(showBackground = true)@Composablefun CenterText() {    Text("Hello World", textAlign = TextAlign.Center,                modifier = Modifier.width(150.dp))}

复制代码

处理字体

@Composablefun DifferentFonts() {    Column {        Text("Hello World", fontFamily = FontFamily.Serif)        Text("Hello World", fontFamily = FontFamily.SansSerif)    }}

复制代码

文字中包含多种样式

如需在同一 Text 可组合项中设置不同的样式，必须使用 AnnotatedString，该字符串可使用任意注解样式加以注解。

行数上限

@Composablefun LongText() {    Text("hello ".repeat(50), maxLines = 2)}

复制代码

文字溢出

@Composablefun OverflowedText() {    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)}

复制代码

3.主题

4.用户互动

选择文字，需要使用 SelectionContainer 可组合项封装文字元素，使用 DisableSelection 可组合项来封装不可选择的部分

@Composablefun SelectableText() {    SelectionContainer {        Text("This text is selectable")    }}

复制代码

获取点击文字的位置，如果您想在 Text 可组合项内获取点击位置，在对文字的不同部分执行不同操作的情况下，您需要改用 ClickableText

@Composablefun SimpleClickableText() {    ClickableText(        text = AnnotatedString("Click Me"),        onClick = { offset ->            Log.d("ClickableText", "$offset -th character is clicked.")        }    )}

复制代码

点击注解

5.输入和修改文字

TextField 允许用户输入和修改文字

设置 TextField 样式，singleLine，maxLines，textStyle
键盘选项 capitalization，autoCorrect，keyboardType，imeAction
格式设置

@Composablefun PasswordTextField() {    var password by rememberSaveable { mutableStateOf("") }
    TextField(        value = password,        onValueChange = { password = it },        label = { Text("Enter password") },        visualTransformation = PasswordVisualTransformation(),        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)    )}

复制代码

发布于: 2 小时前阅读数: 2

原文链接:【http://xie.infoq.cn/article/941de4121171261625f5a27f1】。文章转载请联系作者。

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的，就是调整好自己的精神状态，以最佳的面貌去面对那些未曾经历过得事情，对生活充满热情和希望。

发布

暂无评论

创作场景

Compose 中的文字

1.显示文字

2.设置文本样式

3.主题

4.用户互动

5.输入和修改文字

Changing Lin

评论