compose系列教程-6.实现图文列表,添加点击事件

news2024/9/23 11:27:46

每个行添加点击事件,可以使用`Clickable`组件。在`Clickable`组件的`onClick`参数中,您可以指定要在用户单击行时执行的操作。下面是一个示例代码:


@Composable
fun ImageTextList(imageTextList: List<ImageTextItem>, onItemClick: (ImageTextItem) -> Unit) {
    LazyColumn {
        itemsIndexed(imageTextList) { index, item ->
            ImageTextListItem(index, item, onItemClick)
        }
    }
}

@Composable
fun ImageTextListItem(index: Int, item: ImageTextItem, onItemClick: (ImageTextItem) -> Unit) {
    Clickable(onClick = { onItemClick(item) }) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Image(
                painter = painterResource(id = item.imageId),
                contentDescription = null,
                modifier = Modifier
                    .size(64.dp)
                    .clip(shape = CircleShape)
            )
            Spacer(modifier = Modifier.width(16.dp))
            Text(
                text = item.title,
                style = MaterialTheme.typography.h6,
                modifier = Modifier.weight(1f)
            )
            Text(
                text = item.subtitle,
                style = MaterialTheme.typography.body2,
                modifier = Modifier.align(Alignment.CenterVertically)
            )
        }
    }
}

data class ImageTextItem(
    val imageId: Int,
    val title: String,
    val subtitle: String
)

val imageTextList = listOf(
    ImageTextItem(
        imageId = R.drawable.image1,
        title = "Title 1",
        subtitle = "Subtitle 1"
    ),
    ImageTextItem(
        imageId = R.drawable.image2,
        title = "Title 2",
        subtitle = "Subtitle 2"
    ),
    ImageTextItem(
        imageId = R.drawable.image3,
        title = "Title 3",
        subtitle = "Subtitle 3"
    ),
)

@Preview
@Composable
fun PreviewImageTextList() {
    ImageTextList(imageTextList = imageTextList, onItemClick = { item ->
        // Handle item click event
    })
}
 

最后:推荐一款基于openai引擎的idea中ai生成代码的插件,使用插件可以很方便的询问查找生成想要的代码,Idea上的Ai生成代码插件

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

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

相关文章

机器学习学习记录1:基本术语和假设空间

基本术语机器学习正是这样一门学科&#xff0c;它致力于研究如何通过计算的手段&#xff0c;利用经 验来玫善系统自身的性能在计算机系统中&#xff0c;"经验"通常以"数据"形式存 在&#xff0c;因此&#xff0c;机器学习所研究的主要内容&#xff0c;是关…

数据仓库的设计思想

数据仓库设计 知识点01&#xff1a;设计大纲与学习目标 #内容大纲1、数据仓库基础知识&#xff08;回顾&#xff09;什么是数仓为什么有数仓数仓的特点是什么OLTP和OLAP系统区别&#xff08;数据库和数仓的区别&#xff09;2、数仓系统的架构与核心流程核心1&#xff1a;ETL核…

mybatis(二)

mybatis练习---2种方式 能够使用映射配置文件实现CRUD操作 能够使用注解实现CRUD操作 配置文件CRUD就是把sql语句写到配置文件中&#xff0c;注解CRUD就是吧sql语句写到注解上。 一、配置文件实现CRUD 如上图所示产品原型&#xff0c;里面包含了品牌数据的 查询 、 按条件查…

使用ControlNet 控制 Stable Diffusion

本文将要介绍整合HuggingFace的diffusers 包和ControlNet调节生成文本到图像&#xff0c;可以更好地控制文本到图像的生成 ControlNet是一种通过添加额外条件来控制扩散模型的神经网络结构。它提供了一种增强稳定扩散的方法&#xff0c;在文本到图像生成过程中使用条件输入&…

【工具使用】STM32CubeMX-基础使用篇

一、概述 无论是新手还是大佬&#xff0c;基于STM32单片机的开发&#xff0c;使用STM32CubeMX都是可以极大提升开发效率的&#xff0c;并且其界面化的开发&#xff0c;也大大降低了新手对STM32单片机的开发门槛。     本文主要面向初次接触STM32CubeMX的同学&#xff0c;大…

垃圾回收:垃圾数据如何自动回收

有些数据被使用之后&#xff0c;可能就不再需要了&#xff0c;我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中&#xff0c;那么内存会越用越多&#xff0c;所以我们需要对这些垃圾数据进行回收&#xff0c;以释放有限的内存空间 不同语言的垃圾回收策略 通常…

「中华田园敏捷开发」,是老板无能还是程序员无力?

敏捷开发一直都是无数程序员的追求&#xff0c;也被被视为“开发者的福音”&#xff0c;但显然敏捷开发在中国落地的专业度还不够&#xff0c;以至于出现了“中华田园敏捷”的说法&#xff0c;什么叫“中华田园敏捷开发”&#xff1f; 简单点说&#xff1a;中华田园敏捷开发的…

异常(C++)

文章目录1. 概念1.1 C语言处理错误机制1.2 C异常机制throw表达式try...catch语句例子2. 抛出异常2.1 栈展开栈展开的例子2.2 栈展开过程中对象被自动销毁2.3 析构函数与异常内存泄漏2.4 异常对象3. 捕获异常3.1 捕获子类异常3.2 异常的重新抛出4. 异常安全4.2 例子不抛出异常保…

VIT(vision transformer)onnx模型解析

背景&#xff1a;transformer在CV领域的应用论文下载链接&#xff1a;https://arxiv.org/abs/2010.11929Pytorch实现代码&#xff1a; pytorch_classification/vision_transformer(太阳花的小绿豆博主实现的代码)有一些大神在研究关于CNNtransformer或者纯用transformer实现。原…

北邮22信通:你是不是在looking for……那串代码?(2)第三章单链表

相信有了第二章顺序表的基础&#xff0c;小伙伴们学习第三章链表应该会轻松一点吧 目录 类模板下的单链表 1.1书上干净完整代码&#xff08;无增改、适合自己动手实验&#xff09; 1.2对书上代码的完善和对一些问题的验证和解释代码 1.补全一个函数&#xff1a; 2.this指…

荧光染料IR 825叠氮IR825 N3,IR-825 azide,IR-825叠氮 科研试剂

产品描述&#xff1a;IR-825 N3含有叠氮基团&#xff0c;IR-825是一种近红外染料&#xff08;NIR&#xff09;&#xff0c;IR-825在封装成纳米颗粒后&#xff0c;可能用于cancer光热和光动力 。叠氮化物基团可以参与铜催化的与炔部分的点击化学反应。西安凯新生物科技有限公司近…

基于多任务融合的圣女果采摘识别算法研究

基于多任务融合的圣女果采摘识别算法研究 1、简介 本文主要解决圣女果生产销售环节中&#xff0c;现有的流程是采摘成熟的圣女果&#xff0c;再对采摘下的果实进行单独的品质分级&#xff0c;不仅费时费力&#xff0c;而且多增加一个环节&#xff0c;也增加了对果实的二次伤害…

Oracle 19c之RPM安装

19c的RPM包下载链接&#xff0c; https://www.oracle.com/database/technologies/oracle19c-linux-downloads.html 可以看到&#xff0c;19c开始支持企业版本的RPM&#xff0c;容量是2.5GB&#xff0c; 使用手工方式&#xff0c;通过RPM安装19c数据库&#xff0c;只需要两步操…

汽车零部件行业MES解决方案,实现生产全过程监控

行业背景 汽车汽配行业是中国国民经济的支柱产业&#xff0c;涉及的工艺包括压铸、冲压、注塑、机加、焊接、电子、喷涂、电镀、热处理、检测、装配等。 公安部数据显示&#xff0c;平均每百户家庭拥有汽车达到60辆。广阔的市场为行业带来大量需求的同时也带来了激烈的市场竞…

【Linux】网络入门

&#x1f387;Linux&#xff1a; 博客主页&#xff1a;一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 看似不起波澜的日复一日&#xff0c;一定会在某一天让你看见坚持…

栈和队列详细讲解+算法动画

栈和队列 栈stack 栈也是一种线性结构相比数组&#xff0c;栈对应的操作数数组的子集只能从一端添加元素&#xff0c;也只能从一端取出元素这一端称为栈顶 栈是一种后进先出的数据结构Last in Firt out(LIFO)在计算机的世界里&#xff0c;栈拥有者不可思议的作用 栈的应用 …

设计UI - Adobe xd对象介绍

矩形工具 新建矩形 操作步骤&#xff1a;选择矩形工具&#xff0c;快捷键R&#xff0c;鼠标在画板上拖出矩形即可。 拖动定界框周围圆形手柄&#xff0c;可快速调整矩形大小&#xff0c;也可以输入宽和高的参数对矩形大小进行改变。 移动矩形 操作步骤&#xff1a;选择选择工具…

AWS-解析mysql binlog同步数据方案

虽然是公有云的鼻祖&#xff0c;AWS在某些产品的实现却太不给力&#xff1b;可能是习惯了阿里云喂到嘴边的感觉&#xff0c;AWS很多方案需要自己折腾&#xff0c;蛋疼&#xff01;比如这里要讲的mysql数据同步方案。阿里云产品DTS&#xff0c;点几下就OK了&#xff0c;AWS&…

06_01_Spark SQL

Spark SQL 课程目标 说出Spark Sql的相关概念说出DataFrame与RDD的联系独立实现Spark Sql对JSON数据的处理独立实现Spark Sql进行数据清洗 1、Spark SQL 概述 Spark SQL概念 Spark SQL is Apache Spark’s module for working with structured data. 它是spark中用于处理结…

百家号如何写文章赚钱,百家号写文章真的赚钱?

随着互联网的快速发展&#xff0c;越来越多的人开始关注到写文章赚钱这个领域。而在众多写作平台中&#xff0c;头条号无疑是最受欢迎的一个。那么&#xff0c;百家号写文章赚钱是真的吗&#xff1f;如何写文章赚钱呢&#xff1f;下面我们就来一一解答。 首先&#xff0c;百家号…