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 = false
    var i = 1
    LazyColumn(
        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)

                }
            }
        }
    }
}

运行结果如下：

参考文献：

扫描二维码关注公众号，回复： 17068198 查看本文章

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