Compose中的Text组件

news2024/11/17 3:26:21

纵向布局为:Column

横向布局为:Row

设置内容

text属性设置内容。

设置权重

Modifier.weight(1.0f, true)权重设置,第一个参数 Float类型设置占比权重,第二个参数当为true时,元素将占据分配的整个宽度。

fontSize设置字体大小,FontFamily(Font(R.font.shizizuo))设置字体样式。

设置字体间距

letterSpacing 设置字体间距。

Text(
    //权重设置
    modifier = Modifier.weight(1.0f, true),
    text = "当前数量:$index",
    fontSize = 30.sp,
    //字体样式设置
    fontFamily = FontFamily(Font(R.font.shizizuo)),
    //字体颜色设置
    color = colorResource(id = R.color.purple_500),
    //设置字符间距
    letterSpacing = 5.sp
)

更多属性参考源码:

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
)

设置下划线与删除线

TextDecoration.Underline给字体设置下划线,TextDecoration.LineThrough给字体设置删除线,extAlign.Center设置字体内容居中。

Text(
    //宽度全屏
    modifier = Modifier.fillMaxWidth(),
    text = "Hello world!",
    //下划线
    textDecoration = TextDecoration.Underline,
    //内容居中
    textAlign = TextAlign.Center
)

Text(
    modifier = Modifier.fillMaxWidth(),
    text = "Hello world!",
    //中划(删除/过时)线
    textDecoration = TextDecoration.LineThrough,
    //内容居中
    textAlign = TextAlign.Center
)

设置行高

lineHeight设置行高,fontSize设置字体大小,maxLines设置最大行,TextOverflow.Clip设置文本超出不显示,TextOverflow.Ellipsis设置超出文本省略号显示。

Text(
    "素胚勾勒出青花笔锋浓转淡",
    //行高
    lineHeight = 35.sp,
    //字符间距
    letterSpacing = 35.sp,
    //字体大小
    fontSize = 15.sp,
    //最大行
//    maxLines = 1,
    //剪切溢出的文本以固定其容器。
//    overflow = TextOverflow.Clip,
    //使用省略号表示文本已溢出。
//    overflow = TextOverflow.Ellipsis,
)

设置指定字符样式

使用buildAnnotatedString属性设置内容,SpanStyle设置字符样式。

Text(
    modifier = Modifier.fillMaxWidth(),
    text = buildAnnotatedString {
        withStyle(
            style = SpanStyle(
                fontWeight = FontWeight.Bold,
                color = Color.Blue,
                fontSize = 20.sp
            )
        ) {
            append("H")
        }
        append("ello\t")
        withStyle(
            style = SpanStyle(
                fontWeight = FontWeight.Bold,
                color = Color.Green,
                fontSize = 20.sp
            )
        ) {
            append("W")
        }
        append("orld")
    },
    textAlign = TextAlign.Center
)

 长按复制与过滤复制

SelectionContainer属性中添加的内容支持长按复制。SelectionContainer中设置DisableSelection属性,DisableSelection中设置的内容可跳过复制。

SelectionContainer(modifier = Modifier.fillMaxWidth()) {
    Column {
        Text(
            "天青色等烟雨",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
        Text(
            "而我在等你",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
        Text(
            "月色被打捞起",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
        //过滤复制
        DisableSelection {
            Text(
                "晕开了结局",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
            Text(
                "如传世的青花瓷",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
        Text(
            "自顾自美丽",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
        Text(
            "你眼带笑意",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
    }
}

完整代码:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.cwj.composedemo.ui.theme.ComposeDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    //动态改变内容,初始值设置为0
                    val index = rememberSaveable { mutableStateOf(0) }
                    Greeting(index.value) {
                        index.value = it
                    }
                }
            }
        }
    }
}

@Composable
fun Greeting(index: Int, onIndexChangeInt: (Int) -> Unit) {
    //纵向布局
    Column(
        modifier = Modifier.fillMaxSize(),
        //纵向居中
//        verticalArrangement = Arrangement.Center,
        //横向居中
//        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        //横向布局
        Row(
            Modifier.padding(10.dp, 10.dp),
            //纵向居中
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                //权重设置
                modifier = Modifier.weight(1.0f, true),
                text = "当前数量:$index",
                fontSize = 30.sp,
                //字体样式设置
                fontFamily = FontFamily(Font(R.font.shizizuo)),
                //字体颜色设置
                color = colorResource(id = R.color.purple_500),
                //设置字符间距
                letterSpacing = 5.sp
            )

            Button(
                //边框宽度与颜色设置
                border = BorderStroke(2.dp, color = colorResource(id = R.color.purple_200)),
                //圆角设置
                shape = RoundedCornerShape(8.dp),
                colors = ButtonDefaults.buttonColors(
                    //容器颜色
                    containerColor = colorResource(id = R.color.purple_500),
                    //内容颜色
                    contentColor = colorResource(id = R.color.white),
                ),
                onClick = {
                    onIndexChangeInt(index + 1)
                }
            ) {
                Text(
                    text = stringResource(id = R.string.add),
                    //斜体
//                fontStyle = FontStyle.Italic,
                    //加粗
//                fontWeight = FontWeight.Bold,
                )
            }
        }

        Text(
            //宽度全屏
            modifier = Modifier.fillMaxWidth(),
            text = "Hello world!",
            //下划线
            textDecoration = TextDecoration.Underline,
            //内容居中
            textAlign = TextAlign.Center
        )

        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "Hello world!",
            //中划(删除/过时)线
            textDecoration = TextDecoration.LineThrough,
            //内容居中
            textAlign = TextAlign.Center
        )

        Text(
            "素胚勾勒出青花笔锋浓转淡",
            //行高
            lineHeight = 35.sp,
            //字符间距
            letterSpacing = 35.sp,
            //字体大小
            fontSize = 15.sp,
            //最大行
//            maxLines = 1,
            //剪切溢出的文本以固定其容器。
//            overflow = TextOverflow.Clip,
            //使用省略号表示文本已溢出。
//            overflow = TextOverflow.Ellipsis,
        )

        Text(
            modifier = Modifier.fillMaxWidth(),
            text = buildAnnotatedString {
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        color = Color.Blue,
                        fontSize = 20.sp
                    )
                ) {
                    append("H")
                }
                append("ello\t")

                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        color = Color.Green,
                        fontSize = 20.sp
                    )
                ) {
                    append("W")
                }
                append("orld")
            },
            textAlign = TextAlign.Center
        )

        //长按复制
        SelectionContainer(modifier = Modifier.fillMaxWidth()) {
            Column {
                Text(
                    "天青色等烟雨",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
                Text(
                    "而我在等你",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
                Text(
                    "月色被打捞起",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
                //过滤复制
                DisableSelection {
                    Text(
                        "晕开了结局",
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                    Text(
                        "如传世的青花瓷",
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                }
                Text(
                    "自顾自美丽",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
                Text(
                    "你眼带笑意",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        //动态改变内容,初始值设置为0
        val index = rememberSaveable { mutableStateOf(0) }
        Greeting(index.value) {
            index.value = it
        }
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

李沐深度学习记录3:11模型选择、欠拟合和过拟合

通过多项式拟合探索欠拟合与过拟合 import math import numpy as np import torch from torch import nn from d2l import torch as d2l#生成数据集 max_degree 20 # 多项式的最大阶数 n_train, n_test 100, 100 # 训练和测试数据集大小 true_w np.zeros(max_degree) # …

VMware 17pro安装流程附带密钥手把手教

VMware 17pro centos-8.5.2111-isos-x86_64安装包下载_开源镜像站-阿里云 安装VMware 17pro 下一步 勾选我接营许可协议中的条款点击下一步 更改路径后点击下一步 注意两个都要取消勾选不然会自动更新 下一步即可 最后一步为安装就行(我电脑上有VMware 16pro所以我的…

3.绘制一个点(鼠标点击)

愿你出走半生,归来仍是少年! 通过鼠标点击交互,实现在gl中绘制点。 1.知识点 1.1.点击坐标转换为Gl坐标 通过canvas的点击事件将会获得鼠标在浏览器客户区中的坐标。通过移除canvas自身位置后可获取鼠标在canvas中的点击位置。同时通过canvas的长宽将坐…

Mini-dashboard 和meilisearch配合使用

下载的meilisearch一般是development模式,内置客户端,修改客户端后需要重要全部编译,花时间太长了。前后端分离才是正道,客户端修改不用重新编译后端。 方法如下: 1、修改配置文件/etc/meilisearch.toml,…

磁盘io使用率高问题排查

Linux系统出现了性能问题,一般我们可以通过top、iostat、free、vmstat等命令来查看初步定位问题。其中iostat可以给我们提供丰富的IO状态数据。 1.小文件读写的磁盘性能瓶颈是寻址(随机读写性能更差)评估标准:TPS 2.大文件读写的磁盘性能瓶颈…

cereal:支持C++11的开源序列化库

cereal:支持C11的开源序列化库 文章目录 一:引言二、cereal简介三、cereal的下载和使用 一:引言 序列化 (Serialization) 程序员在编写应用程序的时候往往需要将程序的某些数据存储在内存中,然后将其写入某个文件或是将它传输到网络中的另…

认识计算机主板

目录 定义主要部件简单图示 主要功能 定义 计算机主板(Motherboard)是计算机系统中的核心组件之一,也被称为系统板、主板或母板。它是一个电子电路板,用于连接和支持计算机的各种硬件组件,包括中央处理器(…

零售业:别让数据安全成为业务的绊脚石!(附文件下载)

零售业上榜! 截至2023年8月31日,南都大数据研究院通过各地行政执法公示平台、媒体报道等公开渠道,收集到146起依据《数据安全法》作出行政处罚决定的案例。梳理发现,零售业以10.27%的占比位居行业第三,成为数据安全行…

尚硅谷Nginx教程由浅入深--笔记

尚硅谷Nginx教程由浅入深--笔记 Nginx简介Nginx相关概念反向代理负载均衡动静分离 Nginx安装Nginx命令Nginx配置Nginx配置实例反向代理1反向代理2负载均衡动静分离 Nginx简介 Nginx是一个高性能的HTTP和反向代理服务器,特点是内存占用少,并发能力强。 …

高铁站高速稳定用网秘籍,赶紧收藏

中秋国庆黄金周将至,销售旺季即将来临。车来车往、人潮涌动,稳定可靠的网络连接,成为了各大小商户抢占市场、掌握流量密码的关键。 在湖南省郴州市,某食品连锁商店负责人正在为店铺网络问题发愁。该连锁店部分销售网点位于繁忙的高…

Pikachu靶场——暴力破解

文章目录 1. 暴力破解1.1 基于表单的暴力破解1.2 验证码绕过(on server)1.3 验证码绕过(on client)1.4 token防爆破?1.5 漏洞防御 1. 暴力破解 暴力破解漏洞是指攻击者通过尝试各种组合的用户名和密码,以暴力方式进入系统或应用程序的方法。它利用了系统或应用程序…

睿趣科技:新手无货源怎么开抖音小店

抖音小店的开设对于许多商家来说是一个有吸引力的选择,尤其是对于那些喜欢短视频和社交媒体的年轻人。然而,对于没有货源的新手来说,这可能是一个令人头疼的问题。这篇文章将为你提供一些解决方案。 首先,你可以考虑从批发市场购买…

掌握SKILL语言:数字IC设计师必备的技能之一

去年在各个平台更新了一篇《数字IC必学之《Skill入门教程》建议收藏!》,阅读量在每个平台都很客观,且这半年以来,不断有粉丝留言想要获取这份资料。看来大家对于SKILL的需求是很大的,想要掌握SKILL语言:数字…

95、Spring Data Redis 之使用RedisTemplate 实现自定义查询 及 Spring Data Redis 的样本查询

Spring Data Redis 之使用RedisTemplate 实现自定义查询 Book实体类 原本的接口,再继承我们自定义的接口 自定义查询接口----CustomBookDao 实现类:CustomBookDaoImpl 1、自定义添加hash对象的方法 2、自定义查询价格高于某个点的Book对象 测试&a…

微信小程序wxs标签 在wxml文件中编写JavaScript逻辑

PC端开发 可以在界面中编写JavaScript脚本 vue/react这些框架更是形成了一种常态 因为模板引擎和jsx语法本身就都是在js中的 我们小程序中其实也有类似的奇妙写法 不过先声明 这东西不是很强大 我们可以先写一个案例代码 wxml代码参考 <view><wxs module"wordSt…

如何与瑞诺司Rhenus 建立EDI连接?

Rhenus Automotive 是德国百年家族企业Rethmann Group的子公司&#xff0c;提供从零部件的有序供应、即装即用模块的组装&#xff0c;一直到整车的组装。主要在全球范围内为劳斯莱斯&#xff0c;宝马&#xff0c;奔驰&#xff0c;奥迪等汽车企业提供智能制造解决方案。 项目挑战…

阿拉伯文排版是如何实现的

背景&#xff1a; 今天开工了&#xff0c;无意间看到多语言的页面&#xff0c;毕竟我们网站也是有多语言的 但是并没有阿拉伯语。但是我很好奇&#xff0c;分析阿拉伯语言的css并没有发现什么猫腻&#xff01; 到底是怎么实现的呢&#xff1f; 解&#xff1a; html dir 属性 …

聊聊MySQL的聚簇索引和非聚簇索引

文章目录 1. 索引的分类1. 存储结构维度2. 功能维度3. 列数维度4. 存储方式维度5. 更新方式维度 2. 聚簇索引2.1 什么是聚簇索引2.2 聚簇索引的工作原理 3. 非聚簇索引&#xff08;MySQL官方文档称为Secondary Indexes&#xff09;3.1 什么是非聚簇索引3.2 非聚簇索引的工作原理…

win7怎么录屏视频?小白也能轻松学会

“win7怎么录屏视频呀&#xff1f;在学校机房上课&#xff0c;电脑都是win7系统的&#xff0c;每次需要录屏的时候都找不到方法&#xff0c;问了老师也解决不了&#xff0c;有人知道win7怎么录屏吗&#xff1f;” Windows 7系统已经逐渐淡出了主流操作系统的行列&#xff0c;但…

JVM上篇之虚拟机与java虚拟机介绍

目录 虚拟机 java虚拟机 简介 特点 作用 位置 整体结构 类装载子系统 运行时数据区 java执行引擎 Java代码执行流程 jvm架构模型 基于栈式架构 基于寄存器架构 总结 jvm的生命周期 1.启动 2.执行 3.退出 JVM的发展历程 虚拟机 所谓虚拟机&#xff0c;指的…