compose Text和TextField简单使用

简介: compose Text和TextField简单使用

Text


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


Text使用


简单使用

  1. 代码
@Composable
fun SimpleText() {
  Text("Hello World")
}
复制代码
  1. 效果

image.png


修改文字样式

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

image.png


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

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("重要的事另起一行说:因为说实话,我只是个菜鸟")
            }
        }
    })
}
复制代码
  1. 效果

image.png


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

第一行显示两种样式的文字,这需要两个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,//光标颜色
            )
        )
复制代码

效果:

image.png


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//获取焦点时候边框的颜色
                )
        )
复制代码

效果:

image.png


首发后补充


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…

实现效果

image.png



相关文章
|
5月前
|
移动开发 Java 编译器
Kotlin与Jetpack Compose:Android开发生态的演进与架构思考
本文从资深Android工程师视角深入分析Kotlin与Jetpack Compose在Android系统中的技术定位。Kotlin通过空安全、协程等特性解决了Java在移动开发中的痛点,成为Android官方首选语言。Jetpack Compose则引入声明式UI范式,通过重组机制实现高效UI更新。两者结合不仅提升开发效率,更为跨平台战略和现代架构模式提供技术基础,代表了Android开发生态的根本性演进。
227 0
|
JSON JavaScript 前端开发
❤Nodejs 第九章(token身份认证和express-jwt的安装认识)
【4月更文挑战第9天】Node.js第九章介绍了Token身份认证,特别是JWT(JSON Web Token)作为跨域认证的解决方案。JWT由Header、Payload和Signature三部分组成,用于在客户端和服务器间安全传输用户信息。前端收到JWT后存储在localStorage或sessionStorage中,并在请求头中发送。Express-JWT是一个中间件,用于解析JWT。基本用法包括设置secret和algorithms。注意安全问题,避免混合使用不同算法以防止降级攻击。
343 0
|
存储 前端开发 Java
SpringMVC中重定向请求时传输参数原理分析与实践
SpringMVC中重定向请求时传输参数原理分析与实践
459 2
SpringMVC中重定向请求时传输参数原理分析与实践
|
12月前
|
人工智能 自然语言处理 决策智能
DRT-o1:腾讯推出专注于文学翻译的 AI 模型,擅长理解比喻和隐喻等修辞手法,在翻译时保留原文的情感色彩
DRT-o1 是腾讯研究院推出的文学翻译系列 AI 模型,通过长链思考推理技术显著提升翻译质量,特别擅长处理比喻和隐喻等修辞手法。
420 2
DRT-o1:腾讯推出专注于文学翻译的 AI 模型,擅长理解比喻和隐喻等修辞手法,在翻译时保留原文的情感色彩
|
9月前
|
搜索推荐 UED
销售易CRM:用户体验与市场评价深度分析
销售易CRM是国内领先的客户关系管理系统,以其现代化的界面设计、强大的移动端支持和优质的客户服务赢得广泛好评。系统操作简洁直观,支持个性化定制与多设备访问,移动端功能齐全且具备离线支持,协同工具丰富。销售易注重客户服务,提供快速响应、专业培训和持续优化。市场评价显示,用户对其功能、体验和服务均给予高度认可,是企业提升客户管理效率和推动销售增长的理想选择。
|
Android开发 Kotlin
kotlin安卓开发【Jetpack Compose】:封装SnackBarUtil工具类方便使用
GPT-4o 是一个非常智能的模型,比当前的通义千问最新版本在能力上有显著提升。作者让GPT开发一段代码,功能为在 Kotlin 中使用 Jetpack Compose 框架封装一个 Snackbar 工具类,方便调用
|
存储 API Kotlin
Kotlin中的List集合
Kotlin中的List集合
251 2
|
JSON 自然语言处理 搜索推荐
开发一款专属的 VSCode 代码提示插件
作为前端开发者一定用过VsCode这款利器,而其强大的插件能力无疑更是让我们深深的爱上了它。据不完全统计,VsCode插件市场中的插件数量已经超过了3万,由此可见大家的热情有多高。其中涉及到各种各样功能的插件,有主题曲相关的,有代码开发相关的,比如代码片段、Git插件、tslint等等。作为开发者,肯定用过各种各样的代码提示的插件,代表性的有TabNine、Copilot等等。今天就让我们来自己动手,开发一款专属的代码提示插件。毕竟别人的再好也是别人的, 属于自己的才是最好的。
3342 1
开发一款专属的 VSCode 代码提示插件
|
前端开发 JavaScript
Select2(4.0.6)城市搜索
实现了城市列表的前端搜索,输入汉字、拼音首字母均可搜索,前端搜索。
1122 0
Select2(4.0.6)城市搜索
uniapp后台播放音频功能制作
uniapp后台播放音频功能制作
849 0