Compose 简单组件

文章目录

  • Compose 简单组件
    • Text
      • Text属性
      • 使用
      • AnnotatedString
        • SpanStyle
        • ParagraphStyle
      • SelectionContainer 和 DisableSelection
      • ClickableText
    • TextField
      • TextField属性
      • 使用
      • OutlinedTextField
      • BasicTextField
      • KeyboardOptions 键盘属性
      • KeyboardActions IME动作
    • Button
      • Button属性
      • 使用
    • Image
      • Image属性
      • 使用
      • ContentScale 缩放比
      • alpha 图片透明度
      • colorFilter 图片着色
      • 加载网络图片
    • CircularProgressIndicator & LinearProgressIndicator
      • 圆形进度条
      • 条形进度条

Compose 简单组件

Text

Compose中的“TextView”。

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 // 样式配置,包含颜色、字体、行高等
)

使用

在这里插入图片描述

Column(modifier = Modifier.fillMaxSize()) {Text("hello compose",color = Color.Red,fontSize = 16.sp,fontStyle = FontStyle.Italic,fontWeight = FontWeight.Bold)Text(stringResource(id = R.string.app_text),color = Color.Blue,fontFamily = FontFamily.Cursive)Text("下划线", textDecoration = TextDecoration.Underline)Text("贯穿线", textDecoration = TextDecoration.LineThrough)Text("猫和老鼠", textAlign = TextAlign.Center, modifier = Modifier.width(250.dp))Text("床前明月光,疑似地上霜,举头望明月,低头思故乡", lineHeight = 35.sp, modifier = Modifier.width(250.dp))
}

AnnotatedString

AnnotatedString 支持在同一组Text中设置不同的样式。

SpanStyle

SpanStyle 用于字符。

在这里插入图片描述

Text(buildAnnotatedString {withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {append("H")}append("ello")withStyle(style = SpanStyle(color = Color.Red, fontWeight = FontWeight.Bold)) {append("W")}append("orld")
})
ParagraphStyle

ParagraphStyle 用于整个段落。

在这里插入图片描述

Text(buildAnnotatedString {withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {withStyle(style = SpanStyle(color = Color.Blue)) {append("Hello")append("\n")}withStyle(style = SpanStyle(color = Color.Red)) {append("World")append("\n")}append("Text")}
})

SelectionContainer 和 DisableSelection

  • SelectionContainer 用于文字选择。
  • DisableSelection 用于禁止文字选择。

在这里插入图片描述

SelectionContainer(modifier = Modifier.fillMaxSize()) {Column {Text("床前明月光")Text("疑是地下霜")DisableSelection {Text("hello")Text("world")}Text("举头望明月")Text("低头思故乡")}
}

ClickableText

  • ClickableText 用于可点击文本。
ClickableText(text = AnnotatedString("hello world"), onClick = { offset ->Log.e("TAG", "offset: ${offset}")  })

在Text中添加额外信息:

val annotatedString = buildAnnotatedString {append("点击")pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com/")withStyle(style = SpanStyle(color = Color.Red, fontWeight = FontWeight.Bold)) {append("Url")}pop()
}ClickableText(text = annotatedString, style = TextStyle(fontSize = 30.sp), onClick = { offset ->annotatedString.getStringAnnotations(tag = "URL", start = offset, end = offset).firstOrNull()?.let { annotation -> Log.e("TAG", annotation.item) }})

TextField

Compose中的"EditText"。

TextField属性

@Composable
fun TextField(value: String,onValueChange: (String) -> Unit, // 监听输入变化modifier: Modifier = Modifier, // 修饰符enabled: Boolean = true, // 是否可点击readOnly: Boolean = false, // 是否只读textStyle: TextStyle = LocalTextStyle.current, // 文字样式label: @Composable (() -> Unit)? = null, // 定义label组件placeholder: @Composable (() -> Unit)? = null, // 定义placeholder组件leadingIcon: @Composable (() -> Unit)? = null, // 定义前置图标trailingIcon: @Composable (() -> Unit)? = null, // 定义后置图标isError: Boolean = false, // 是否提示错误visualTransformation: VisualTransformation = VisualTransformation.None, // 转换输入值keyboardOptions: KeyboardOptions = KeyboardOptions.Default, // 软键盘选项,类似于inputTypekeyboardActions: KeyboardActions = KeyboardActions(), // IME动作singleLine: Boolean = false, // 是否单行maxLines: Int = Int.MAX_VALUE, // 支持最大行数interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 交互流shape: Shape =MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), // 输入框形状colors: TextFieldColors = TextFieldDefaults.textFieldColors() // 不同状态下颜色
)

使用

简单使用:

在这里插入图片描述

val text = remember { mutableStateOf("hello") }
TextField(value = text.value, onValueChange = { text.value = it }, label = { Text("标签") })

其他属性使用:

在这里插入图片描述

val text = remember { mutableStateOf("hello") }
TextField(value = text.value,onValueChange = { text.value = it },label = { Text("请输入") },maxLines = 2,textStyle = TextStyle(color = Color.Blue),modifier = Modifier.padding(20.dp)
)

OutlinedTextField

在这里插入图片描述

val text = remember { mutableStateOf("hello") }
OutlinedTextField(value = text.value, onValueChange = { text.value = it }, label = { Text("标签") })

BasicTextField

val text = remember { mutableStateOf("hello") }
BasicTextField(value = text.value, onValueChange = { text.value = it })

KeyboardOptions 键盘属性

class KeyboardOptions constructor(// 大写选项:// None 无大写,Characters 全部大写,Words 单词首字母大写,Sentences 句子首字母大写val capitalization: KeyboardCapitalization = KeyboardCapitalization.None, // 是否开启自动更正val autoCorrect: Boolean = true,// 键盘类型:// Text 普通类型,Ascii ASCII字符类型,Number 数字类型,Phone 电话号码// Uri URI类型,Email 邮件地址类型,Password 密码类型,NumberPassword 数字密码类型val keyboardType: KeyboardType = KeyboardType.Text,// IME动作// Default 默认行为,None 不执行任何操作,默认为换行,Go 开始动作,Search 搜索动作// Send 发送动作,Previous 上一个,Next 下一步,Done 完成val imeAction: ImeAction = ImeAction.Default
) 
val text = remember { mutableStateOf("hello") }
TextField(value = text.value,onValueChange = { text.value = it },label = { Text("请输入") },maxLines = 2,textStyle = TextStyle(color = Color.Blue),modifier = Modifier.padding(20.dp),keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters,keyboardType = KeyboardType.Email,autoCorrect = true,imeAction = ImeAction.Done)
)

KeyboardActions IME动作

val context = LocalContext.current
val text = remember { mutableStateOf("hello") }
TextField(value = text.value,onValueChange = { text.value = it },label = { Text("请输入") },maxLines = 2,textStyle = TextStyle(color = Color.Blue),modifier = Modifier.padding(20.dp),keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters,keyboardType = KeyboardType.Email,autoCorrect = true,imeAction = ImeAction.Search),keyboardActions = KeyboardActions(onSearch = {Toast.makeText(context, "${text.value} world", Toast.LENGTH_SHORT).show()})
)

Button

Compose中的”Button“。

Button属性

@Composable
fun Button(onClick: () -> Unit, // 点击事件modifier: Modifier = Modifier, // 修饰符enabled: Boolean = true, // 是否可点击interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 交互流elevation: ButtonElevation? = ButtonDefaults.elevation(), // 高度shape: Shape = MaterialTheme.shapes.small, // 按钮形状border: BorderStroke? = null, // 边框colors: ButtonColors = ButtonDefaults.buttonColors(), // 不同状态下颜色contentPadding: PaddingValues = ButtonDefaults.ContentPadding, // 内边距content: @Composable RowScope.() -> Unit // 内容
)

使用

简单使用:

在这里插入图片描述

Button(onClick = { }, shape = RoundedCornerShape(10.dp)) {Text("按钮")
}

使用colors属性:

colors就是用来设置按钮在不同状态下的颜色的。

在这里插入图片描述

Button(onClick = { },shape = RoundedCornerShape(10.dp),colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red, // 背景颜色contentColor = Color.Green, // 内容颜色disabledBackgroundColor = Color.Blue, // 未启用时的背景颜色disabledContentColor = Color.Gray // 未启用时的内容颜色)
) {Text("按钮")
}

使用contentPadding属性:

contentPadding用于设置内容与容器间的距离。

在这里插入图片描述

Button(onClick = { },contentPadding = PaddingValues(20.dp, 10.dp)
) {Text("按钮")
}

Image

Compose中的”ImageView“。

Image属性

@Composable
fun Image(painter: Painter,contentDescription: String?, // 文字描述modifier: Modifier = Modifier, // 修饰符alignment: Alignment = Alignment.Center, // 对齐方式contentScale: ContentScale = ContentScale.Fit, // 图片缩放模式alpha: Float = DefaultAlpha, // 透明度colorFilter: ColorFilter? = null // 修改图片
)@Composable
@NonRestartableComposable
fun Image(bitmap: ImageBitmap,contentDescription: String?,modifier: Modifier = Modifier,alignment: Alignment = Alignment.Center,contentScale: ContentScale = ContentScale.Fit,alpha: Float = DefaultAlpha,colorFilter: ColorFilter? = null,filterQuality: FilterQuality = DefaultFilterQuality
)

使用

简单使用:

在这里插入图片描述

Image(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = "图片"
)

使用Bitmap:

val context = LocalContext.current
val path = "${context.cacheDir}${File.separator}a.jpg"
val bitmap = BitmapFactory.decodeFile(path)
Image(bitmap = bitmap.asImageBitmap(), contentDescription = null
)

ContentScale 缩放比

@Stable
interface ContentScale {// 计算缩放因子fun computeScaleFactor(srcSize: Size, dstSize: Size): ScaleFactorcompanion object {// 保持图片宽高比,使图片大于或等于目标尺寸@Stableval Crop // 保持图片宽高比,使图片大于或等于目标尺寸@Stableval Fit // 缩放图片并保持宽高比,使图片高度匹配目标尺寸@Stableval FillHeight // 缩放图片并保持宽高比,使图片宽度匹配目标尺寸@Stableval FillWidth // 如果图片大于目标,则缩放@Stableval Inside  // 不处理@Stableval None = FixedScale(1.0f)// 横向和纵向缩放填充目标尺寸@Stableval FillBounds}
}
Image(painter = painterResource(id = R.drawable.a),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.fillMaxSize(0.5F)
)

alpha 图片透明度

Image(painter = painterResource(id = R.drawable.a),contentDescription = null,alpha = 0.5F
)

colorFilter 图片着色

@Immutable
class ColorFilter internal constructor(internal val nativeColorFilter: NativeColorFilter) {companion object {// 使用颜色滤镜// 参数一:颜色值,参数二:混合模式@Stablefun tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn): ColorFilter =actualTintColorFilter(color, blendMode)// 使用颜色矩阵,用于修改饱和度        @Stablefun colorMatrix(colorMatrix: ColorMatrix): ColorFilter =actualColorMatrixColorFilter(colorMatrix)// 模拟灯光效果@Stablefun lighting(multiply: Color, add: Color): ColorFilter =actualLightingColorFilter(multiply, add)}
}

加载网络图片

添加依赖库:

coil是一个图片加载库,完全使用Kotlin编写,使用了Kotlin的协程,图片网络请求方式默认为OkHttp。其特点如下:足够快速,它在内存、图片存储、图片采样、Bitmap重用、暂停/取消下载等细节方面都做了大幅优化。

 implementation "com.google.accompanist:accompanist-coil:0.15.0"

使用:

在这里插入图片描述

val painter = rememberImagePainter(data = "https://www.baidu.com/img/flexible/logo/pc/result@2.png",imageLoader = LocalImageLoader.current
)
Image(painter = painter,contentDescription = null,modifier = Modifier.border(1.dp,Color.Red,shape = RectangleShape)
)

CircularProgressIndicator & LinearProgressIndicator

Compose中的”ProgressBar“。

圆形进度条

简单使用:

在这里插入图片描述

CircularProgressIndicator()

使用属性:

在这里插入图片描述

CircularProgressIndicator(modifier = Modifier.size(100.dp),color = Color.Red,strokeWidth = 10.dp
)

设置进度:

在这里插入图片描述

CircularProgressIndicator(progress = 0.5F,modifier = Modifier.size(100.dp),color = Color.Red,strokeWidth = 10.dp
)

条形进度条

简单使用:

在这里插入图片描述

LinearProgressIndicator()

设置进度:

在这里插入图片描述

LinearProgressIndicator(progress = 0.5F,color = Color.Red,backgroundColor = Color.Blue
)

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

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

相关文章

基于SpringBoot+Vue的校园商铺管理系统设计与实现(源码+文档+包运行)

一.系统概述 信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到了互联网时代才发现能补…

中铁建智能安全帽与统一视频平台smarteye配奥维地图是否绝配?

中铁建智能安全帽与统一视频平台smarteye配奥维地图是否绝配? 在电厂、煤矿等厂矿企业内部,施工、抢修,临抢任务等场合下,都需要智能安全帽的实时图传和地图定位功能,相比较传统的高德/百度地图,奥维地图在…

黄仁勋最新访谈:GPU性能的革命性提升与AI未来

近期,英伟达CEO黄仁勋与美国CNBC知名主持人、股评人吉姆克莱默(Jim Cramer)在《Mad Money》节目中展开了一场关于技术未来和人工智能的对话。访谈里,黄仁勋不仅提到了英伟达在过去八年中将AI算力性能提高1000倍,还预言…

HarmonyOS实战开发-横竖屏切换

介绍 本实例展示如何使用媒体查询,通过ohos.mediaquery 接口完成在不同设备上显示不同的界面效果。 效果预览 使用说明 1.在竖屏设备上,首页展示新闻列表,点击新闻进入详情界面。 2.在横屏设备上,首页左侧展示新闻列表&#x…

Learn something about front end——颜色

​ 好装的标题啊哈哈哈哈哈哈 最近get了一个学习前端的网站叫FreeCodeCamp 原色:rgb三个值的其中一个值拉满,比如说rgb(255,0,0)是红色这样,三个主色: 红色 rgb(255, 0, 0) #FF0000绿色 rgb(0, 255, 0) #00FF00蓝色 rgb(0, 0, …

GAN:对抗生成网络【通俗易懂】

一、概述 对抗生成网络(GAN)是一种深度学习模型,由两个神经网络组成:生成器G和判别器D。这两个网络被训练来协同工作,以生成接近真实数据的新样本。 生成器的任务是接收一个随机噪声向量,并将其转换为与真…

鸿蒙语言TypeScript学习第18天:【泛型】

1、TypeScript 泛型 泛型(Generics)是一种编程语言特性,允许在定义函数、类、接口等时使用占位符来表示类型,而不是具体的类型。 泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。 使用泛型的主要目的是为了处…

SqlServer快速导出数据库结构的方法

1、查询出所有的表 SELECT name, id From sysobjects WHERE xtype u ORDER BY name ASC 2、根据表名查询出表结构 select syscolumns.name as "列名", systypes.name as "数据类型", syscolumns.length as "数据长度", sys.extended_prope…

prompt 工程整理(未完、持续更新)

工作期间会将阅读的论文、一些个人的理解整理到个人的文档中,久而久之就积累了不少“个人”能够看懂的脉络和提纲,于是近几日准备将这部分略显杂乱的内容重新进行梳理。论文部分以我个人的理解对其做了一些分类,并附上一些简短的理解&#xf…

【Golang】并发编程之三大问题:原子性、有序性、可见性

目录 一、前言二、概念理解2.1 有序性2.2 原子性后果1:其它线程会读到中间态结果:后果2:修改结果被覆盖 2.3 可见性1)store buffer(FIFO)引起的类似store-load乱序现象2)store buffer(非FIFO)引起的类似store-store乱序…

Netty学习——实战篇4 Netty开发Http服务实战、ByteBuf使用、开发群聊系统 备份

1 Netty开发Http服务实战 (1)Netty服务器监听8000端口,浏览器发出请求“http://localhost:8000” (2)服务器可以回复消息给客户端,“你好,我是服务器”,并对特定请求资源进行过滤。 HttpServer…

冯诺依曼与进程【Linux】

文章目录 冯诺依曼体系结构(从硬件的角度描述)冯诺依曼体系结构(从软件的角度描述)操作系统(软件)理解管理系统调用和库函数进程查看进程的两种方式 通过系统调用获取进程的PID和PPID通过系统调用创建进程-…

Linux之 USB驱动框架-USB总线核心和主控驱动(4)

一、USB设备描述符 一个USB设备描述符中可以有多个配置描述符,即USB设备可以有多种配置;一个配置描述符中可以有多个接口描述符,即USB设备可以支持多种功能(接口);一个接口描述符中可以有多个端点描述符。 …

SpringBoot项目创建及简单使用

目录 一.SpringBoot项目 1.1SpringBoot的介绍 1.2SpringBoot优点 二.SpringBoot项目的创建 三.注意点 一.SpringBoot项目 1.1SpringBoot的介绍 Spring是为了简化Java程序而开发的,那么SpringBoot则是为了简化Spring程序的。 Spring 框架: Spring…

linux 自定义命令/别名

参考资料 Linux(Ubuntu)自定义命令的使用Linux/Ubuntu系统自定义Shell命令Ubuntu/Linux 操作系统 自定义命令 目录 一. 为路径取别名二. 修改.profile文件2.1 .profile简介2.2 需求2.3 修改.profile文件 三. 创建软链接 一. 为路径取别名 ⏹需求:有一个work文件夹…

Unity 获取RenderTexture像素颜色值

拿来吧你~ 🦪功能介绍🌭Demo 🦪功能介绍 💡不通过Texture2D 而是通过ComputerShader 提取到RenderTexture的像素值,效率有提升哦! 💡通过扩展方法调用,方便快捷:xxxRT.G…

GTX312L【超强抗干扰、12通道电容式触摸芯片】

GTX312L是韩国GreenChip推出的一款12通道电容式触摸IC,具备自动灵敏度校准、超强抗干扰能力,可抗特斯拉(小黑盒)线圈干扰,可完美Pin to Pin替换TSM12;支持单键/多点触控。 产品描述: 该芯片供…

PHP反序列化命令执行+PHP反序列化POP大链 +PHP反序列化基础

[题目信息]: 题目名称题目难度PHP反序列化命令执行1 [题目考点]: 反序列化命令执行,获取题目flag。[Flag格式]: SangFor{t5euvZ_OB8Jd_h2-}[环境部署]: docker-compose.yml文件或者docker tar原始文件。 docker-compose up …

HADOOP大数据处理技术9-JavaSe

心若有阳光 你便会看见这个世界有那么多美好值得期待和向往 ​ 2024/4/9 13.static 用于修饰属性和方法 static属性通过类名访问 1)static实现内存共享 bean1和bean2的内存是互相独立的 怎么实现内存共享呢? 共享内存​public class Comm { public…

Java中的装箱和拆箱

本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱、拆箱相关的问题。 目录: 装箱和拆箱概念 装箱和拆箱是如何实现的 面试中相关的问题 装箱和拆箱概念 Java为每种基本数据类型都提供了对应的包装器类型,至于为…