Android JetPack Compose Preliminary 2 ~ Implémentation de la fonction de liste déroulante

Référence de configuration d'Android JetPack Compose Android JetPack Compose préliminaire 1

Définissez une interface de liste déroulante dans cette application, similaire à l'effet d'affichage du composant RecyclerView.

1. Définir les classes d'entités

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

Définissez une classe d'entité Robot contenant trois attributs représentant le nom, la description et le numéro de ressource d'image correspondant.

2. Définir les éléments de la liste

Affiche un élément de liste d'un objet 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. Définir une liste déroulante

/**
 * 定义显示可滚动的机器人列表项
 * @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. Appelez l'activité principale 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)

                }
            }
        }
    }
}

Les résultats en cours d'exécution sont les suivants :

les références:

Tutoriel Android Compose | Développeurs Android | Développeurs Android