Jetpack Compose 核心组件(Text, Images, Buttons)(6)

导读大纲

- 1.1 基本组件介绍
- 1.2 Text
- - 1.2.1 基本用法
  - 1.2.2 设计文字风格
- 1.3 Image组件
- - 1.3.1 从各种来源加载图片
  - 1.3.2 关键属性
  - 1.3.3 如何加载和显示不同类型的图像
  - 1.3.4 内容描述和无障碍访问:
- 1.4 Button组件
- - 1.4.1 基本用法
  - 1.4.2 装饰和自定义
  - 1.4.3 处理按钮点击
  - 1.4.4 重要考虑因素

1.1 基本组件介绍

在 Jetpack Compose 的世界里,核心组件是构建 Android UI的基础元素
- 这些可组合元素是由 Compose 框架提供的预构建 UI 组件
- 它们是创建从简单文本显示到复杂交互式布局的基本构件
核心组件的用途
- 简化用户界面开发
  1. 核心可组合元素抽象化创建和管理用户界面元素的复杂性.
  2. 您无需编写冗长的代码来填充布局、创建视图和设置属性
    - 只需使用可组合函数,就能事半功倍地实现同样的效果.
- 确保一致性
  1. 核心组件遵循 Material Design 原则
    - 可确保在您的应用程序中提供视觉一致、用户友好的体验
  2. 它们提供一套遵循既定设计准则的标准化组件
    - 为您节省从头开始创建自定义UI元素所需的时间和精力
- 优化性能
  1. Jetpack Compose 在设计时充分考虑性能
  2. 对核心组件进行优化,以实现高效的渲染和状态管理
    - 从而使用户界面更加流畅、反应更加灵敏
基本构件
- 核心可组合元素可以看作是 Jetpack Compose 的基本词汇
  1. 它们包括用于显示文本(Text)、图片(Image)、按钮(Button)等的元素
- 这些元素可以在布局(如列、行和框)中组合和排列
  1. 以创建复杂的用户界面结构
在用户界面创建中的重要性
- 如果没有核心组件,构建 Jetpack Compose UI将是一项艰巨的任务
  1. 它们为UI开发提供坚实的基础和便捷的起点
- 通过了解如何使用和定制这些核心构件
  1. 您可以相对轻松地创建各种用户界面

1.2 Text

Text组件是在 Jetpack Compose 中呈现文本内容的常用工具
- 它的用途非常广泛,可以显示简单的字符串、样式文本,甚至是带格式的富文本

1.2.1 基本用法

最简单的方法是,Text 可组合元素接收一个文本参数,即要显示的字符串:

@Composable
fun SimpleText() {Text(text = "Hello, Jetpack Compose!")
}

1.2.2 设计文字风格

Text组件提供大量属性来定制文本的外观
- <1> fontSize 控制文字的大小
  1. 使用sp(与比例无关的像素)调整字体大小,以适应用户的屏幕密度
  2. 实在搞不清sp和dp的, 直接上才艺：字体大小使用sp, 布局尺寸使用dp
- <2> fontWeight 确定文本的粗细
  1. 例如, FontWeight.Normal , FontWeight.Bold
- <3> color 设置文本的颜色
  1. 可以使用标准颜色值或创建自定义颜色值
- <4> style 允许为文本应用TextStyle
  1. 文本样式包括fontFamily、fontSize、fontWeight、color和其他文本属性

Text(text = "Large Text", fontSize = 24.sp)              // <1> 
Text(text = "Bold Text", fontWeight = FontWeight.Bold)   // <2> 
Text(text = "Blue Text", color = Color.Blue)             // <3> 
val myStyle = TextStyle(                                 // <4>fontFamily = FontFamily.Serif,fontSize = 18.sp,fontWeight = FontWeight.SemiBold
)
@Composable
fun SimpleText() {Text(text = "Hello, Jetpack Compose!",style = myStyle                                  // <4>)
}

修改器(Modifiers)是 Jetpack Compose 的一项强大功能
- 用于定制元素外观、行为以及组件布局
- <1> 对Text组件应用修改器,以实现各种效果
  1. padding : 在文本周围添加填充
  2. background: 设置文本的背景颜色
  3. border: 在文本周围添加边框
  4. clickable: 使文本可点击(类似超链接)
  5. …

@Composable
fun SimpleText() {Text(text = "Padded and Clickable Text",modifier = Modifier                         // <1>.padding(16.dp).clickable { /* Handle click */ })
}

1.3 Image组件

Image composable 是在 Jetpack Compose UI 中显示图片的基本工具
- 无论是简单的图标、照片还是复杂的矢量图形
- Image composable 都能以灵活高效的方式将视觉效果整合到App中

1.3.1 从各种来源加载图片

可绘制资源(Drawable Resources)
- 存储在项目 res/drawable 文件夹中的图片
  1. 可以使用 PainterResource 加载它们

Image(painter = painterResource(id = R.drawable.my_image),contentDescription = "My Image"
)

位图: 以Bitmap对象表示的图像

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.my_image)
Image(bitmap = bitmap.asImageBitmap(), contentDescription = "My Image")

Vector Drawables
- 存储在项目 res/drawable 文件夹中的可缩放矢量图像
  1. 可以使用 painterResource 载入它们

Image(painter = painterResource(id = R.drawable.my_vector_image),contentDescription = "My Vector Image"
)

图像 URI
- 从 Uri 对象表示的 URL 或其他来源加载的图像

val imageUri = "https://www.example.com/my_image.jpg"
AsyncImage(model = imageUri,contentDescription = "My Image",
)

其他来源: Jetpack Compose 还支持从 File 对象等其他来源加载图片

1.3.2 关键属性

Image可组合元素具有几个重要属性:
- painter 最基本的属性
  1. 它指定加载图像的方式, 根据图片来源
    - 可以使用 painterResource、painterFile 或其他 Painter 实现
- contentDescription 可访问性的关键属性
  1. 它为视力受损或使用屏幕阅读器的用户提供图像的文字描述
  2. 请务必提供有意义的描述,以提高应用程序的可访问性.
- contentScale 决定图像如何缩放以适应可用空间,常用值包括
  1. ContentScale.Fit
  2. ContentScale.Crop
  3. ContentScale.FillBounds
- modifier: 与其他可组合元素一样
  1. 可以使用修改器自定义图像组件的外观和行为

1.3.3 如何加载和显示不同类型的图像

从本地加载使用前两种, 最后一种是从网络上加载图片
- <1> 需要安装依赖库

// Drawable Resource
Image(painter = painterResource(id = R.drawable.my_image),contentDescription = "My Image"
)
// Vector Drawable
Image(painter = painterResource(id = R.drawable.my_vector_image),contentDescription = "My Vector Image"
)
// Image from URL       <1>
AsyncImage(model = "https://www.example.com/my_image.jpg",contentDescription = "My Image",
)

1.3.4 内容描述和无障碍访问:

contentDescription 属性
- 对于让有视觉障碍的用户访问您的应用程序至关重要
提供 contentDescription 属性后
- 屏幕阅读器就可以公布图片的描述,让用户了解图片的内容

Image(painter = painterResource(id = R.drawable.profile_picture),contentDescription = "Profile picture of the user"
)

1.4 Button组件

按钮组件是在 Jetpack Compose 中创建交互式用户界面的基本要素
按钮是用户在应用程序中触发操作的主要方式
- 因此对导航、表单提交和其他交互任务至关重要

1.4.1 基本用法

创建按钮的最简单方法是在按钮内容中提供要显示的文本
- <1> onClick lambda 是定义点击按钮时应执行的操作

@Composable
fun MyButton() {Button(onClick = { /* Handle button click */ }) {   // <1>Text("Click Me")}
}

按钮元素提供多种属性来定制其外观和行为
- onClick
  1. 点击按钮时执行的 lambda 函数
    - 将在此输入处理按钮操作的代码
- modifier
  1. 用于为按钮应用修改器,就像使用其他可组合元素一样
  2. 您可以添加padding、更改背景颜色、添加边框等
- enabled
  1. 布尔值,用于控制按钮是启用还是禁用
  2. 禁用按钮显示为灰色,且不可点击
- colors
  1. 可自定义按钮在不同状态下(如正常、按下、禁用)的颜色

1.4.2 装饰和自定义

使用modifiers和colors属性来设计按钮样式,使其与应用程序的设计相匹配
- <1> 带padding的简约按钮, 风格高雅
- <2> 带自定义颜色的按钮

@Composable
fun MyButton() {// <1>Button(onClick = { /* ... */ },modifier = Modifier.padding(8.dp),elevation = ButtonDefaults.buttonElevation(defaultElevation = 6.dp,pressedElevation = 8.dp,disabledElevation = 0.dp)) {Text("Elevated Button")}// <2>val buttonColors = ButtonDefaults.buttonColors(containerColor = Color.Blue,contentColor = Color.White)Button(onClick = { /* ... */ },colors = buttonColors) {Text("Custom Button")}
}

1.4.3 处理按钮点击

要定义点击按钮时发生的操作,您需要在 onClick lambda 编写相应的代码
- <1> 当点击时, 这里 Toast 一条消息

Button(onClick = {// <1>Toast.makeText(context, "Button clicked!", Toast.LENGTH_SHORT).show()},modifier = Modifier.padding(8.dp),elevation = ButtonDefaults.buttonElevation(defaultElevation = 6.dp,pressedElevation = 8.dp,disabledElevation = 0.dp)
) {Text("click me")
}

1.4.4 重要考虑因素

可访问性
- 始终为图片按钮或没有文本标签的按钮提供 contentDescription
- 这样可以确保有视觉障碍的用户了解按钮的用途.
状态管理
- 在更复杂的场景中,可能需要根据应用程序的数据或用户交互
  1. 来管理按钮的状态(例如,按钮是启用还是禁用)
- 使用状态管理技术(如 Remember 或 ViewModel)可有效处理这些场景