安卓学习笔记之五：Android Studio_骰子案例3（Kotlin搭配 Jetpack Compose实现）

使用 Compose 创建一款交互式 Dice Roller Android 应用。

完成：

  • 定义可组合函数。
  • 使用组合创建布局。
  • 使用 Button 可组合项创建按钮。
  • 导入 drawable 资源。
  • 使用 Image 可组合项显示图片。
  • 使用可组合项构建交互式界面。
  • 使用 remember 可组合项将组合中的对象存储到内存中。
  • 使用 mutableStateOf() 函数刷新界面以创建可观察对象。

一 创建项目 

  1. 在 Android Studio 中，依次点击 File > New > New Project。
  2. 在 New Project 对话框中，选择 Empty Activity，然后点击 Next
  3. 在 Name 字段中，输入 Dice Roller。
  4. 在 Minimum SDK 字段中，从菜单中选择最低 API 级别 24 (Nougat)，然后点击 Finish。

 二 创建布局基础架构

主布局初始代码如下：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme {// A surface container using the 'background' color from the themeSurface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {Greeting("Android")}}}}
}@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {Text(text = "Hello $name!",modifier = modifier)
}@Preview(showBackground = true)
@Composable
fun GreetingPreview() {MyApplicationTheme {Greeting("Android")}
}

仿真运行，可以看到 Hello Andriod输出。

1 重构示例代码

您需要更改一些生成的代码，使其更贴近 Dice Roller 应用的主题。

如您在最终应用的屏幕截图中看到的那样，应用中有骰子的图片和用于掷骰子的按钮。您将构建可组合函数以反映此架构。

如需重构示例代码，请执行以下操作：

  • 移除 DefaultPreview() 函数。
  • 创建一个带有 @Composable 注解的 DiceWithButtonAndImage() 函数。

该可组合函数代表布局的界面组件，还包含按钮点击和图片显示逻辑。

  • 移除 Greeting(name: String) 函数。
  • 创建一个带有 @Preview 和 @Composable 注解的 DiceRollerApp() 函数。

由于该应用仅包含一个按钮和一张图片，因此不妨将该可组合函数视为应用本身。因此，我们称之为 DiceRollerApp() 函数。 

@Preview
@Composable
fun DiceRollerApp() {}@Composable
fun DiceWithButtonAndImage() {}

由于移除了 Greeting() 函数，因此 DiceRollerTheme() lambda 正文中对 Greeting("Android") 的调用会突出显示为红色。这是因为编译器无法再找到对该函数的引用。

删除 onCreate() 方法中的 setContent{} lambda 内的所有代码。

  • 在 setContent{} lambda 正文中，调用 DiceRollerTheme{} lambda，然后在 DiceRollerTheme{} lambda 内调用 DiceRollerApp() 函数。
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {DiceRollerTheme {DiceRollerApp()}}}
}
  • 在 DiceRollerApp() 函数中，调用 DiceWithButtonAndImage() 函数。
@Preview
@Composable
fun DiceRollerApp() {DiceWithButtonAndImage()
}

 2 添加修饰符

Compose 使用 Modifier 对象，该对象是用于修饰或修改 Compose 界面元素行为的元素的集合。您将使用该对象来设置 Dice Roller 应用组件的界面组件样式。

如需添加修饰符，请执行以下操作：

  • 将 DiceWithButtonAndImage() 函数修改为接受 Modifier 类型的 modifier 实参，并为其分配默认值 Modifier。
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
}

 

该函数允许传入 modifier 形参。modifier 形参的默认值为 Modifier 对象，因此是方法签名的 = Modifier 部分。借助某个形参的默认值，未来调用该方法的任何调用方都可以决定是否为该形参传递值。如果它们传递自己的 Modifier 对象，则可以自定义界面的行为和装饰。如果它们选择不传递 Modifier 对象，系统会假定使用默认值，即普通的 Modifier 对象。您可以将这种做法应用于任何形参。如需详细了解默认实参，请参阅默认实参。

  • 现在，DiceWithButtonAndImage() 可组合项具有修饰符参数，请在调用该可组合项时传递修饰符。由于 DiceWithButtonAndImage() 函数的方法签名已更改，因此在调用该方法时，应传入包含所需装饰的 Modifier 对象。Modifier 类负责对 DiceRollerApp() 函数中的可组合对象进行装饰或向其添加行为。在本例中，需要向传递到 DiceWithButtonAndImage() 函数的 Modifier 对象添加一些重要的装饰。
  • 将 fillMaxSize() 方法链接到 Modifier 对象，以便让布局填充整个屏幕。
  • 将 wrapContentSize() 方法链接到 Modifier 对象，然后传递 Alignment.Center 作为实参以将组件居中。Alignment.Center 会指定组件同时在水平和垂直方向上居中。

这样，fun DiceRollerApp()函数的最终代码如下：

@Preview
@Composable
fun DiceRollerApp() {DiceWithButtonAndImage(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center))
}

 注意：

  • import androidx.compose.ui.Modifier 语句会导入 androidx.compose.ui.Modifier 软件包，以便您引用 Modifier 对象。
  • fllMaxSize() 和 wrapContentSize() 的 import 语句分别是 import androidx.compose.foundation.layout.fillMaxSize 和 import androidx.compose.foundation.layout.wrapContentSize。
  • Alignment 对象的 import 语句为 import androidx.compose.ui.Alignment。

三 创建垂直布局 

在 Compose 中，垂直布局是使用 Column() 函数创建的。

Column() 函数是一种可组合项布局，它会按垂直序列放置其子级。在预期的应用设计中，骰子图片应该垂直显示在掷骰子按钮的上方。

如需创建垂直布局，请执行以下操作：

  • 在 DiceWithButtonAndImage() 函数中，添加一个 Column() 函数。
  • 将 modifier 实参从 DiceWithImageAndButton() 方法签名传递给 Column() 的修饰符实参。modifier 实参可确保 Column() 函数中的可组合项遵守对 modifier 实例调用的约束条件。
  • 将 horizontalAlignment 实参传递给 Column() 函数，然后将其值设为 Alignment.CenterHorizontally。这可以确保列中的子项相对于宽度在设备屏幕上居中。

 

fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {Column (modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally) {}
}

四 添加按钮

  • 在 strings.xml 文件中，添加一个字符串并将其设为 Roll 值。
  • 在 Column() 的 lambda 正文中，添加 Button() 函数。
  • 在 MainActivity.kt 文件中，将 Text() 函数添加到函数 lambda 正文中的 Button()。
  • 将 roll 字符串的字符串资源 ID 传递到 stringResource() 函数，并将结果传递到 Text 可组合项。 

strings.xml 文件： 

<string name="roll">Roll</string>

 

fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
Column(modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally) {Button(onClick = { /*TODO*/ }) {Text(stringResource(R.string.roll))}}    
}

五 添加图片

应用的另一个重要组件是骰子图片，在用户点按 Roll 按钮后，该图片会显示结果。

1 导入图片

预先准备好 6 个骰子图片文件，都是200*250dp，其骰子点数分别为 1 到 6。

将其放到项目目录\app\src\main\res\drawable下。

2 添加 Image 可组合项 

骰子图片应显示在 Roll 按钮上方。Compose 本身会依序放置界面组件。也就是说，哪个可组合项声明在先，就会先行显示。这意味着，首先声明的可组合项会显示在之后声明的可组合项的上面或前面。Column 可组合项中的可组合项会在设备上按上下顺序显示。在该应用中，您将使用 Column 来垂直堆叠可组合项，因此首先在 Column() 函数中声明的可组合项会先于同一 Column() 函数中之后才声明的可组合项显示。

如需添加 Image 可组合项，请执行以下操作：

  • 在 Column() 函数正文中，在 Button() 函数前面创建一个 Image() 函数。
  • 向 Image() 函数传递一个 painter 实参，然后为其分配接受可绘制资源 ID 实参的 painterResource 值。目前，请传递以下资源 ID：R.drawable.dice_1 实参。
  • 每当您在应用中创建图片时，都应该提供所谓的“内容说明”。内容说明是 Android 开发的重要组成部分。内容说明能够向各界面组件添加说明，以提高无障碍性。如需详细了解内容说明，请参阅描述每个界面元素。您可以将内容说明作为形参传递到图片。 

这样，fun DiceWithButtonAndImage()函数体就变为

Column(modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally
) {Image(painter = painterResource(R.drawable.dice_1),contentDescription = "1")Button(onClick = { /*TODO*/ }) {Text(stringResource(R.string.roll))}
}

预览画面为： 

 

注意：

  • Image 可组合项的 import 语句为 import androidx.compose.foundation.Image。

 六 构建掷骰子逻辑

现在所有必要的可组合项均已存在，接下来您可以修改应用，以便用户能点按按钮来掷出骰子 

1 将 Button 设为可交互

  • 在 DiceWithButtonAndImage() 函数中的 Column() 函数前面，创建一个 result 变量并将其值设为等于 1。
  • 查看 Button 可组合项。您会发现，系统正在向它传递一个 onClick 形参，该形参已设为内含 /*TODO*/ 注释的一对大括号。在本例中，大括号代表所谓的“lambda”，大括号内的区域是 lambda 正文。将函数作为实参进行传递时，相应过程也可称为回调。
  • 在 Button() 函数中，从 onClick 形参的 lambda 正文的值中移除 /*TODO*/ 注解。
  • 掷骰子是随机的。为了在代码中反映这一点，您需要使用正确的语法来生成随机数字。在 Kotlin 中，您可以对一个数字范围使用 random() 方法。在 onClick lambda 正文中，将 result 变量的范围设为 1 到 6，然后针对该范围调用 random() 方法。请注意，在 Kotlin 中，范围由范围中的第一个数字与范围中的最后一个数字之间的两个句点指定。  
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {var result = 1Column(modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally) {Image(painter = painterResource(imageResource), contentDescription = result.toString())Button(onClick = { result = (1..6).random() }) {Text(stringResource(R.string.roll))}}
}

现在，该按钮可点按了，但点按该按钮并不会产生任何可见的变化，因为您仍需构建该功能。

 2 为 Dice Roller 应用添加条件

  • 将 result 变量设为 remember 可组合项。remember 可组合项需要传递函数。
  • 在 remember 可组合项正文中，传入 mutableStateOf() 函数，然后向该函数传递 1 实参。mutableStateOf() 函数会返回一个可观察对象。稍后，您会详细了解可观察对象，但目前这基本上意味着，当 result 变量的值变化时，系统会触发重组、反映结果值并刷新界面。
  • 在 result 变量实例化的下方，创建一个不可变的 imageResource 变量，并将其设为接受 result 变量的 when 表达式，然后将每个可能的结果设为其可绘制对象。 
  • 将传递到 Image 可组合项的 painterResource 形参的 ID 从 R.drawable.dice_1 可绘制对象更改为 imageResource 变量。
  • 通过将 result 变量转换为包含 toString() 的字符串并将其作为 contentDescription 传递，更改 Image 可组合项的 contentDescription 形参以反映 result 变量的值。

这样，fun DiceWithButtonAndImage()函数的最终代码如下：

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {var result by remember {mutableStateOf(1)}Column (modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally) {val imageResource = when (result) {1 -> R.drawable.dice_12 -> R.drawable.dice_23 -> R.drawable.dice_34 -> R.drawable.dice_45 -> R.drawable.dice_5else -> R.drawable.dice_6}Image(painter = painterResource(id = imageResource),contentDescription = result.toString())Button(onClick = { result = (1..6).random() }) {Text(stringResource(R.string.roll))}}
}

 

七 运行应用。

现在，Dice Roller 应用应该完全可以正常运行了！

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

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

相关文章

【Docker】有用的命令

【Docker】有用的命令

文章目录 DockerDocker 镜像与容器的差异Docker的好处Hypervisor运维 一、安装docker二、启动docker三、获取docker镜像四、创建镜像使用命令行创建镜像使用dockerfile创建镜像 五、docker报错 Docker docker镜像&#xff08;Image&#xff09; docker镜像类似于虚拟机镜像&…
阅读更多...
linux 安装anaconda踩坑——哈希值对不上

linux 安装anaconda踩坑——哈希值对不上

下载安装包时执行命令 curl -O https://repo.anaconda.com/archive/Anaconda3-<INSTALLER_VERSION>-Linux-x86_64.sh 其中的<INSTALLER_VERSION>需要填写下载的anaconda版本号&#xff0c;于是我就点开官网提供的版本号链接&#xff0c;将我要下载的版本号copy了一…
阅读更多...
pom.xml常见依赖及其作用

pom.xml常见依赖及其作用

1.org.mybatis.spring.boot下的mybatis-spring-boot-starter&#xff1a;这个依赖是mybatis和springboot的集成库&#xff0c;简化了springboot项目中使用mybatis进行持久化操作的配置和管理 2.org.projectlombok下的lombok&#xff1a;常用注解Data、NoArgsConstructor、AllA…
阅读更多...
如何在Ubuntu部署Emlog，并将本地博客发布至公网可远程访问

如何在Ubuntu部署Emlog，并将本地博客发布至公网可远程访问

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…
阅读更多...
2.20学习总结

2.20学习总结

1.【模板】单源最短路径&#xff08;弱化版&#xff09; 2.【模板】单源最短路径&#xff08;标准版&#xff09; 3.无线通讯网 4.子串简写 5.整数删除 6.拆地毯 【模板】单源最短路径&#xff08;标准版&#xff09;https://www.luogu.com.cn/problem/P4779 题目描述 给定一个…
阅读更多...
Excel SUMPRODUCT函数用法（乘积求和，分组排序）

Excel SUMPRODUCT函数用法（乘积求和，分组排序）

SUMPRODUCT函数是Excel中功能比较强大的一个函数&#xff0c;可以实现sum,count等函数的功能&#xff0c;也可以实现一些基础函数无法直接实现的功能&#xff0c;常用来进行分类汇总&#xff0c;分组排序等 SUMPRODUCT 函数基础 SUMPRODUCT函数先计算多个数组的元素之间的乘积…
阅读更多...
Kubernetes安装nginx-controller作为统一网关

Kubernetes安装nginx-controller作为统一网关

nginx-controller是什么呢? 它是一个能调度nginx的一个kubernetes operator,它能监听用户创建,更新,删除NginxConf对象,来调度本地的nginx实现配置的动态更新。如添加新的代理(http,https,tcp,udp),缓存(浏览器缓存,本地缓存),ssl证书(配置本身,ConfigMap,Secret),更新,删除等…
阅读更多...
c语言结构体与共用体

c语言结构体与共用体

前面我们介绍了基本的数据类型 在c语言中 有一种特殊的数据类型 由程序员来定义类型 目录 一结构体 1.1概述 1.2定义结构体 1.3 结构体变量的初始化 1.4 访问结构体的成员 1.5结构体作为函数的参数 1.6指向结构的指针 1.7结构体大小的计算 二共用体 2.1概述 2.2 访…
阅读更多...
04 Aras Innovator二次开发-客户端方法

04 Aras Innovator二次开发-客户端方法

客户端方法为JS方法。 系统提供了很多触发点&#xff0c;可以嵌入客户端方法&#xff0c;如下&#xff1a; 1 对象类的客户端事件页签&#xff1a; 2 窗体的Form Event和Filed Event 3.关系类的网格事件&#xff1a; 4 属性事件&#xff1a; 5.可自定义Action,触发客户端事件…
阅读更多...
数据结构与算法：栈

数据结构与算法：栈

朋友们大家好啊&#xff0c;在链表的讲解过后&#xff0c;我们本节内容来介绍一个特殊的线性表&#xff1a;栈&#xff0c;在讲解后也会以例题来加深对本节内容的理解 栈 栈的介绍栈进出栈的变化形式 栈的顺序存储结构的有关操作栈的结构定义与初始化压栈操作出栈操作获取栈顶元…
阅读更多...
VR全景开启线上卖房新渠道，助力房企改变营销方式

VR全景开启线上卖房新渠道，助力房企改变营销方式

当下房产行业&#xff0c;还在依靠传统线下发传单、跑客户、做地推吗&#xff1f;在短视频和直播火热的今天&#xff0c;房产行业也开启了线上卖房的新渠道&#xff0c;通过VR全景技术&#xff0c;可以为各个小区的线上宣传增加趣味性和互动性。 一、VR全景漫游可以彰显房源真实…
阅读更多...
如何更换过期的SSL证书？

如何更换过期的SSL证书？

SSL证书是保护网站安全的重要组成部分&#xff0c;它能在客户端和服务器之间建立数据传输加密通道&#xff0c;防止数据在传输过程中被泄露、劫持和窃听。但SSL证书也有有效期限&#xff0c;当SSL证书到期时&#xff0c;您需要及时更换它&#xff0c;以确保网站的安全性和可信度…
阅读更多...
Git基本操作（2）

Git基本操作（2）

Git基本操作&#xff08;2&#xff09; 上交文件之后&#xff0c;git文件的变化git cat-file HEAD指针里面有啥文件被修改git statusgit diff 文件名 版本回退&#xff08;git reset&#xff09;撤销回退git reflog 撤销的三种情况还没有addgit checkout -- [file] 已经add还没…
阅读更多...
Pandas快问快答16-30题

Pandas快问快答16-30题

16. 如何对一个Pandas数据框进行聚合操作? 聚合操作是数据处理中的一种重要方式&#xff0c;主要用于对一组数据进行汇总和计算&#xff0c;以得到单一的结果。在聚合操作中&#xff0c;可以执行诸如求和、平均值、最大值、最小值、计数等统计操作。这些操作通常用于从大量数…
阅读更多...
Vue-Ajax核心知识整理

Vue-Ajax核心知识整理

在Vue框架中可以有很多方式实现 ajax, 其中有xhr、jQuery、fetch、axios、vue-resource, 其中Vue的作者尤雨溪推荐使用axios&#xff0c;所以在使用Vue框架时&#xff0c;尽量还是使用axios 但是当我们使用ajax时&#xff0c;经常会遇到跨域的问题&#xff0c;比如你本地的端口…
阅读更多...
15.一种坍缩式的简单——组合模式详解

15.一种坍缩式的简单——组合模式详解

当曾经的孩子们慢慢步入社会才知道&#xff0c;那年味渐淡的春节就像是疾驰在人生路上的暂停键。 它允许你在隆隆的鞭炮声中静下心来&#xff0c;瞻前顾后&#xff0c;怅然若失。 也允许你在寂静的街道上屏气凝神&#xff0c;倾听自己胸腔里的那团人声鼎沸。 孩子们会明白的&am…
阅读更多...
【Flink精讲】Flink内核源码分析：命令执行入口

【Flink精讲】Flink内核源码分析：命令执行入口

官方推荐per-job模式&#xff0c;一个job一个集群&#xff0c;提交时yarn才分配集群资源&#xff1b; 主要的进程&#xff1a;JobManager、TaskManager、Client 提交命令&#xff1a;bin/flink run -t yarn-per-job /opt/module/flink-1.12.0/examples/streaming/SocketWind…
阅读更多...
Unity—JSON

Unity—JSON

每日一句&#xff1a;手简素中&#xff0c;感生活恬淡&#xff0c;心有所期&#xff0c;忙而不茫 目录 服务器 常见的服务器语言 Unity的开发语言 JSON 功能&#xff1a; JSON最简单的格式 JSON工具 支持的数据结构&#xff08;C#对于JSON&#xff09; 字符含义 JSON…
阅读更多...
单片机stm32智能鱼缸

单片机stm32智能鱼缸

随着我国经济的快速发展而给人们带来了富足的生活&#xff0c;也有越来越多的人们开始养鱼&#xff0c;通过养各种鱼类来美化居住环境和缓解压力。但是在鱼类饲养过程中&#xff0c;常常由于鱼类对水质、水位及光照强度有着很高的要求&#xff0c;而人们也由于工作的方面而无法…
阅读更多...
2023年12月CCF-GESP编程能力等级认证C++编程四级真题解析

2023年12月CCF-GESP编程能力等级认证C++编程四级真题解析

一、单选题（共15题，共30分） 第1题 下面有关函数参数的说法，正确的是( )。 A：函数参数传递时，主函数当中采用值传递方式将参数传递给子函数时，若子函数将参数值改变，主函数当中的参数值不变。 B：函数参数传递时，主函数当中采用值传递方式将参数传递给子函数时，若子…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023