Referencia de configuración de Android JetPack Compose Android JetPack Compose preliminar 1
Defina una interfaz de lista desplazable en esta aplicación, similar al efecto de visualización del componente RecyclerView.
1. Definir clases de entidad
data class Robot(val name:String,val desc:String,val imageId:Int)
Defina una clase de entidad Robot que contenga tres atributos que representen el nombre, la descripción y el número de recurso de imagen correspondiente.
2. Definir elementos de la lista
Muestra un elemento de lista de un objeto 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))
}
}
3. Defina una lista desplazable
/**
* 定义显示可滚动的机器人列表项
* @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 )
}
}
}
4. Llame a la actividad principal 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)
}
}
}
}
}
Los resultados de ejecución son los siguientes:
referencias:
Tutorial de redacción de Android | Desarrolladores de Android | Desarrolladores de Android