Android Compose四： 常用的组件 Text

Text

@Composable
fun Text(text: String,                    //用于设置显示文本modifier: Modifier = Modifier,   //设置形状大小点击事件等color: Color = Color.Unspecified,  //fontSize: TextUnit = TextUnit.Unspecified,fontStyle: FontStyle? = null,fontWeight: FontWeight? = null,fontFamily: FontFamily? = null,letterSpacing: TextUnit = TextUnit.Unspecified,textDecoration: TextDecoration? = null,textAlign: TextAlign? = null,lineHeight: TextUnit = TextUnit.Unspecified,overflow: TextOverflow = TextOverflow.Clip,softWrap: Boolean = true,maxLines: Int = Int.MAX_VALUE,onTextLayout: (TextLayoutResult) -> Unit = {},style: TextStyle = LocalTextStyle.current
)
1 字体颜色 可能受主题ColorScheme影响

例如 我们使用lightColorScheme 且改变主题颜色如下
在这里插入图片描述

  • 当 背景颜色 与 主题颜色一致时 会使用 onPrimary设置的颜色
  • 给 Text 设置color 属性时，使用color的颜色
    效果如下：
    在这里插入图片描述
  • 当如下设置主题时
 primary = Color(0xFFFF0000),secondary = PurpleGrey40,tertiary = Pink40,background = Color(0xFF00FF00),  //背景颜色这只为绿色

效果
在这里插入图片描述
变更背景颜色 为 红色 background = Color(0xFFFF0000) 主题色一致, 字体会默认变换为白色

在这里插入图片描述
应该是不设置 onPrimary 颜色时 默认的颜色
在这里插入图片描述
在这里插入图片描述

  • onPrimary 主色上清晰显示的颜色 可用于文本或图标 就是 区分和主色一样颜色时的颜色

2 字体大小

系统默认字体大小调用如下

  • fontSize: TextUnit = TextUnit.Unspecified,
  • val Unspecified = pack(UNIT_TYPE_UNSPECIFIED, Float.NaN)
  • TextUnit(unitType or (v.toBits().toLong() and 0xFFFF_FFFFL))
    设置字体大小
Text(text = "鹅鹅鹅", fontSize = 30.sp)

效果
在这里插入图片描述

3 通常情况下 我们需要定义整个项目的字体大小和颜色

于是乎我们可以复制一下Text 改造一下
在这里插入图片描述
或者 自己定义一个组件


@Composable
fun MyText(text: String,modifier: Modifier = Modifier,color: Color = TEXT_COLOR_333,fontSize: TextUnit = 22.sp,fontStyle: FontStyle? = null,fontWeight: FontWeight? = null,fontFamily: FontFamily? = null,letterSpacing: TextUnit = TextUnit.Unspecified,textDecoration: TextDecoration? = null,textAlign: TextAlign? = null,lineHeight: TextUnit = TextUnit.Unspecified,overflow: TextOverflow = TextOverflow.Clip,softWrap: Boolean = true,maxLines: Int = Int.MAX_VALUE,onTextLayout: (TextLayoutResult) -> Unit = {},style: TextStyle = LocalTextStyle.current
){Text(text = text,modifier = modifier,color = color,fontSize = fontSize,fontStyle = fontStyle,fontWeight = fontWeight,fontFamily = fontFamily,letterSpacing = letterSpacing,textDecoration = textDecoration,textAlign = textAlign,lineHeight = lineHeight,overflow = overflow,softWrap = softWrap,maxLines = maxLines,onTextLayout = onTextLayout,style = style,)
}

效果
在这里插入图片描述

那么问题来了，屏幕适配怎么整，后边再整吧！

4 fontStyle fontStyle = FontStyle.Italic,

默认：FontStyle.Normal
斜体：FontStyle.Italic
在这里插入图片描述

  • fontWeight fontWeight = FontWeight.Bold
    粗体：FontWeight.Bold 第二行为对比的默认效果
    在这里插入图片描述
    其他效果不明显，可自行测试
5 fontFamily = FontFamily.Cursive

  • FontFamily.Cursive 草书 没啥变化感觉 第二行为对比的默认效果
    在这里插入图片描述

  • FontFamily.Serif 第二行为对比的默认效果
    在这里插入图片描述

  • FontFamily.Default 默认
    在这里插入图片描述

  • FontFamily.Monospace 感觉没啥变化
    在这里插入图片描述

  • FontFamily.SansSerif

  • 没啥变化的可能测试手机不支持这种字体吧

5 letterSpacing

文字间隔
letterSpacing = 50.sp 第二行为对比的默认效果
在这里插入图片描述

6 textDecoration

划线
textDecoration = TextDecoration.LineThrough 第二行为对比的默认效果
在这里插入图片描述
textDecoration = TextDecoration.Underline
在这里插入图片描述

7 textAlign 文字对齐方向
 modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Left

第二行为对比的默认效果
在这里插入图片描述
textAlign = TextAlign.Center
在这里插入图片描述

8 lineHeight行间距 应该是文字基线到下一行文字基线的间距吧

lineHeight = 30.sp 行间距设置30 不够文字高度

MyText(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",  fontSize = 50.sp,fontFamily = FontFamily.SansSerif,letterSpacing = 50.sp,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,lineHeight = 30.sp)

在这里插入图片描述

9 softWrap 是否换行

softWrap = false,
在这里插入图片描述

10 overflow 文字超出显示宽度时的显示效果

搭配softWrap 使用
默认 overflow = TextOverflow.Clip 截断
在这里插入图片描述
overflow = TextOverflow.Ellipsis
在这里插入图片描述
overflow = TextOverflow.Visible的效果 超出限制范围显示
modifier = Modifier.width(130.dp), 限制组件 130dp
无overflow的效果
```
MyText(text = “咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅”, fontSize = 50.sp,
fontFamily = FontFamily.SansSerif,
textDecoration = TextDecoration.Underline,

       modifier = Modifier.width(130.dp),textAlign = TextAlign.Center,lineHeight = 50.sp,softWrap = false,)```

在这里插入图片描述
添加 overflow = TextOverflow.Visible的效果
在这里插入图片描述

11 maxLines 最大行数

maxLines = 2

 MyText(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",  fontSize = 50.sp,fontFamily = FontFamily.SansSerif,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,lineHeight = 50.sp,overflow = TextOverflow.Ellipsis,maxLines = 2)

在这里插入图片描述

12 onTextLayout 字面意思应该是 text渲染到布局的时候的回调

官方注释： callback that is executed when a new text layout is calculated. A
在这里插入图片描述
也差不多一个意思吧

 MyText(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",  fontSize = 50.sp,fontFamily = FontFamily.SansSerif,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,lineHeight = 50.sp,overflow = TextOverflow.Ellipsis,maxLines = 2,onTextLayout = {Log.i("text_compose","${it.lineCount}")})

在这里插入图片描述

13 style 样式
13.1 style = TextStyle()
 constructor(color: Color = Color.Unspecified,    // 与Text的color效果一致 设置文字颜色   优先级低于 Text的colorfontSize: TextUnit = TextUnit.Unspecified,  //设置字体大小   优先级低于 Text的fontWeight: FontWeight? = null,   //设置字体权重   优先级低于 Text的fontStyle: FontStyle? = null,   //设置字体斜体   优先级低于 Text的fontSynthesis: FontSynthesis? = null,   fontFamily: FontFamily? = null,   //设置字体  草书什么的fontFeatureSettings: String? = null,letterSpacing: TextUnit = TextUnit.Unspecified,baselineShift: BaselineShift? = null,textGeometricTransform: TextGeometricTransform? = null,localeList: LocaleList? = null,background: Color = Color.Unspecified,textDecoration: TextDecoration? = null,shadow: Shadow? = null,textAlign: TextAlign? = null,     textDirection: TextDirection? = null,lineHeight: TextUnit = TextUnit.Unspecified,textIndent: TextIndent? = null)

color 与 Text的color效果一样，但是优先级低 同时存在时使用text的color

Text(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",  fontSize = 50.sp,fontFamily = FontFamily.SansSerif,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,lineHeight = 50.sp,overflow = TextOverflow.Ellipsis,maxLines = 2,onTextLayout = {Log.i("text_compose","${it.lineCount}")},color = TEXT_COLOR_999,style = TextStyle(color = Color.Red))

同时存在
在这里插入图片描述
删除Text 的 color = TEXT_COLOR_999,
在这里插入图片描述
其余 参数名与Text一样的 都是此类似结果
下面说明一下其他参数

13.2 fontSynthesis 大概可能就是使用的fontFamily 没有粗体或者斜体的时候，系统给造一个

在这里插入图片描述

13.3 fontFeatureSettings

在这里插入图片描述

13.4 baselineShift 文字基线上下移动

在这里插入图片描述
baselineShift = BaselineShift.None
在这里插入图片描述
baselineShift = BaselineShift.Subscript
//顶部多了一块空白
在这里插入图片描述
baselineShift = BaselineShift.Superscript
//底部多了一块空白
在这里插入图片描述
BaselineShift 类
value class BaselineShift(val multiplier: Float)

在这里插入图片描述

baselineShift = BaselineShift(0.6f) //正数 往上偏移 负数往下偏移么
在这里插入图片描述

13.5 textGeometricTransform = TextGeometricTransform(0.5f,0f)

在这里插入图片描述
textGeometricTransform = TextGeometricTransform(0.5f,0f) 效果
在这里插入图片描述
textGeometricTransform = TextGeometricTransform(0.5f,0.5f)效果
在这里插入图片描述
textGeometricTransform = TextGeometricTransform(0.5f,-0.5f)
在这里插入图片描述

 Box() {Text(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",  fontSize = 50.sp,fontFamily = FontFamily.SansSerif,letterSpacing = 20.sp,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,lineHeight = 50.sp,overflow = TextOverflow.Ellipsis,maxLines = 2,onTextLayout = {Log.i("text_compose","${it.lineCount}")},style = TextStyle(color = Color(0x77FF0000),baselineShift = BaselineShift(-0.4f),textGeometricTransform = TextGeometricTransform(0.8f,-1f)))Text(text = "咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅咏鹅",fontSize = 50.sp,letterSpacing = 20.sp,fontFamily = FontFamily.SansSerif,textDecoration = TextDecoration.Underline,modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center,fontWeight = FontWeight.Bold,lineHeight = 50.sp,overflow = TextOverflow.Ellipsis,maxLines = 2,onTextLayout = {Log.i("text_compose","${it.lineCount}")},style = TextStyle(color = Color.Red,baselineShift = BaselineShift(-0.4f),textGeometricTransform = TextGeometricTransform(0.8f,0f)))}

效果
在这里插入图片描述

13.6 localeList 布吉岛咋玩

在这里插入图片描述

13.7 shadow 文字设置阴影
 style = TextStyle(color = Color.Blue,baselineShift = BaselineShift(-0.4f),shadow = Shadow(color = Color(0x77FF0000),offset = Offset(5.0f,10f), blurRadius = 3f))

在这里插入图片描述

13.8 textIndent 缩进

textIndent = TextIndent(60.sp,30.sp)
在这里插入图片描述
效果
在这里插入图片描述

13.9 platformStyle

在这里插入图片描述

13.10 lineHeightStyle

在这里插入图片描述

在这里插入图片描述

lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.Both)

alignment = LineHeightStyle.Alignment.Top,
alignment = LineHeightStyle.Alignment.Bottom,
效果 好像没什么变化
在这里插入图片描述

trim = LineHeightStyle.Trim.FirstLineTop 改成此值时
底部多了空白空间
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/701835.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

动态规划-两个数组的dp问题3

动态规划-两个数组的dp问题3

文章目录 1. 两个字符串的最小ASCII删除和（712）2. 最长重复子数组（718） 1. 两个字符串的最小ASCII删除和（712） 题目描述： 状态表示： 根据经验以及题目要求，建立二维数…
阅读更多...
数据结构与算法学习笔记三---栈和队列

数据结构与算法学习笔记三---栈和队列

目录 前言 一、栈 1.栈的表示和实现 1.栈的顺序存储表示和实现 1.C语言实现 2.C实现 2.栈的链式存储表示和实现 1.C语言实现 2.C实现 2.栈的应用 1.数制转换 二、队列 1.栈队列的表示和实现 1.顺序队列的表示和实现 2.链队列的表示和实现 2.循环队列 前言 这篇文…
阅读更多...
JVM 自定义类加载器

JVM 自定义类加载器

文章目录 1. 为什么要自定义类加载器1.1 隔离加载类1.2 修改类加载的方式1.3 扩展加载源1.4 防止源码泄漏 2. 自定义类加载器应用场景有哪些3. 两种实现方式 自定义类加载器是Java中的一个高级特性，允许您在运行时动态加载类。通过自定义类加载器，您可以…
阅读更多...
postman 使用教程

postman 使用教程

1. get 请求 ？号后为 get 请求的参数 参数之间用符号"&" 分隔。 假设url 为：http://10.71.7.101/cgi-bin/gw-config.cgi?methodgetway_param&t1715658871647 复制进来到postman的地址栏 后 ？后面的参数会自动添加到参…
阅读更多...
JS中的宏任务和微任务

JS中的宏任务和微任务

JavaScript 引擎是建立在一个事件循环系统之上的，它实时监控事件队列，如果有事件就执行，如果没有事件就等待。事件系统是一个典型的生产消费模式，生产者发出事件，接收者监听事件，在UI 开发中是常见的一个设…
阅读更多...
OFDM802.11a的FPGA实现（十五）短训练序列：STS（含Matlab和verilog代码）

OFDM802.11a的FPGA实现（十五）短训练序列：STS（含Matlab和verilog代码）

原文链接（相关文章合集）：OFDM 802.11a的xilinx FPGA实现 1.前言 在之前已经完成了data域数据的处理，在构建整个802.11a OFDM数据帧的时候，还剩下前导码和signal域的数据帧，这两部分的内容。 PLCP的前导部分…
阅读更多...
【MySQL】Mysql——卸载文档（windows版本）

【MySQL】Mysql——卸载文档（windows版本）

MySQL卸载文档-Windows版 1. 停止MySQL服务 winR 打开运行，输入 services.msc 点击 “确定” 调出系统服务。 停止Mysql服务 2. 卸载MySQL相关组件 打开控制面板 —> 卸载程序 —> 卸载MySQL相关所有组件 3. 删除MySQL安装目录 4. 删除MySQL数据目录 数…
阅读更多...
Axure网上超市用户端APP原型 (O2O生鲜电商/买菜到家/数字零售/京东到家/抖音超市领域)

Axure网上超市用户端APP原型 (O2O生鲜电商/买菜到家/数字零售/京东到家/抖音超市领域)

作品概况 页面数量：共 100 页 源文件格式：rp格式，兼容 Axure RP 9/10，非程序软件无源代码 适用领域：O2O生鲜电商、网上超市、买菜到家、数字零售 作品特色 本作品为网上超市用户消费端Axure交互原型，属于…
阅读更多...
食品饮料厂做配送小程序的作用是什么

食品饮料厂做配送小程序的作用是什么

食品饮料厂品牌旗下通常有多个产品类型，多数是以批发为主，也有直营店及线上直播零售等方式，商家如何将品牌宣传和产品销售的更广是需要思考的，其销售模式也多种多样。 私域店铺也是品牌增长的重要方式，在【雨科】平台…
阅读更多...
prompt工程策略（一：使用 CO-STAR 框架来搭建 prompt 的结构）

prompt工程策略（一：使用 CO-STAR 框架来搭建 prompt 的结构）

原文：我是如何赢得GPT-4提示工程大赛冠军的 原文的原文： How I Won Singapore’s GPT-4 Prompt Engineering Competition 为了让 LLM 给出最优响应，为 prompt 设置有效的结构至关重要。CO-STAR 框架是一种可以方便用于设计 prompt 结构的模板…
阅读更多...
同为科技详解智能PDU所应用的通信协议与接口

同为科技详解智能PDU所应用的通信协议与接口

现如今，信息服务、AI人工智能的飞速发展与增长，全球正经历信息数据的爆炸。不仅数据量以惊人的速度增长，而且全球社会各行业对数据的依赖的程度也在日益增加。这些趋势使数据中心在全球都享有关键基础架构的地位。假设某个数据中心发生严重的…
阅读更多...
USB2514BI-AEZG-TR USB2.0 接口转换集成电路 QFN-36参数指南

USB2514BI-AEZG-TR USB2.0 接口转换集成电路 QFN-36参数指南

USB2514BI-AEZG-TR USB接口集成电路 USB2514BI-AEZG-TR 是一款USB接口集成电路。工作电压为3.3V，采用36-Pin VQFN封装。它支持USB 2.0协议，最大操作频率为24 MHz，最小操作供应电压为3V，最大输出电流为150mA。该器件适用于需要USB集…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023