Android JetPack Compose初步2~实现可滚动列表的功能

Android JetPack Compose的配置参考Android JetPack Compose初步1

在本应用中定义可滚动的列表的界面，类似RecyclerView组件的显示效果。

一、定义实体类

data class Robot(val name:String,val desc:String,val imageId:Int)

定义一个实体类Robot包含三个属性分别表示姓名、描述和对应的图片资源编号。

二、定义列表单项

显示一个Robot对象的列表单项。

/*** 定义显示机器人Robot实体信息的单项* @param i Int* @param robot Robot*/
@Composable
fun RobotCard(context: Context, robot: Robot){Box(modifier = Modifier.fillMaxWidth().background(Color.Black).padding(10.dp).clip(shape = RoundedCornerShape(10.dp)).border(width = 2.dp, color = Color.Blue, shape = RoundedCornerShape(10.dp))){Row(content = {Image(painter = painterResource(id = robot.imageId),contentDescription = "${robot.name}的头像",modifier = Modifier.clip(shape = CircleShape).background(Color.Black).clickable {Toast.makeText(context,"显示${robot.name}-${robot.desc}",Toast.LENGTH_LONG).show()})Column(modifier = Modifier.padding(10.dp)){Text(text = "${robot.name}",color = Color.Black,fontWeight = FontWeight.Bold,fontSize = 16.sp)Text(text="${robot.desc}",color=Color.White,fontWeight = FontWeight.Bold,fontSize = 20.sp)}},modifier=Modifier.fillMaxWidth().background(Color.Green).padding(20.dp))}
}

三、定义可滚动列表

/*** 定义显示可滚动的机器人列表项* @param robots List<Robot>*/
@Composable
fun RobotsView(robots:List<Robot>){var reverseLayout = falsevar i = 1LazyColumn(state = rememberLazyListState(),reverseLayout = reverseLayout,verticalArrangement = if(!reverseLayout) Arrangement.Top else Arrangement.Bottom){items(robots){robot->RobotCard(LocalContext.current,robot = robot )}}
}

四、在主活动MainActivity.kt调用

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)val robots = mutableListOf<Robot>()for(i in 1..20){robots.add(Robot("机器人 $i","Android机器人",android.R.mipmap.sym_def_app_icon))}setContent {Ch04_ComposeTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colors.background) {Column(content = {RobotsView(robots = robots)},modifier = Modifier.fillMaxWidth().wrapContentHeight(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally)}}}}
}

运行结果如下：

参考文献：

Android Compose 教程 | Android 开发者 | Android Developers

Android JetPack Compose初步2~实现可滚动列表的功能相关推荐

Android JetPack Compose初步1
一.为什么要使用JetPack Compose? 1.Android视图层次结构存在的问题由于应用的状态会因用户交互等因素而发生变化,因此界面层次结构需要进行更新以显示当前数据.在更新时会改变 wi ...
Android: Jetpack Compose如何禁用涟漪（水波纹）效果
系列文章目录 Android: Jetpack Compose如何禁用涟漪(水波纹)效果 Android:使用Jetpack Compose 实现Text控件跑马灯效果 Android:使用Jetpa ...
Android Jetpack Compose
Android Jetpack Compose 一.什么是Jetpack Compose 二.关于Jetpack Compase的介绍 Jetpack Compose的特点 Jetpack Compo ...
学不动了，尝试用Android Jetpack Compose重写微信经典飞机大战游戏
前段时间看了TechMerger大佬写的<一气呵成:用Compose完美复刻Flappy Bird!>,甚是有趣,按耐不住那躁动的心,笔者决定跟随大佬的脚步通过写游戏的方式学习Jetpac ...
Android Jetpack Compose——一个简单的微信界面
一个简单的微信界面简述效果视频底部导航栏导航元素导航栏放入插槽绘制地图消息列表效果图实现聊天效果图实现气泡背景联系人界面效果图实现好友详情效果图实现发现效果 ...
(转)Android Jetpack Compose 最全上手指南
在今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明式的U ...
原创|Android Jetpack Compose 最全上手指南
在今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明式的U ...
Android Jetpack Compose 最全上手指南 | 开发者说·DTalk
本文原作者: 码农西哥,原文发布于微信公众号: Android 技术杂货铺 https://mp.weixin.qq.com/s/7tKv_RamfW0rG8tZHXH_rg 在 2019 年的 G ...
Android Jetpack Compose 播放器动画
效果: 直接上完整代码 @OptIn(ExperimentalAnimationApi::class) @Composable fun TestBottom(musicViewModel: Music ...

Android JetPack Compose初步2~实现可滚动列表的功能

Android JetPack Compose初步2~实现可滚动列表的功能相关推荐

最新文章

热门文章