Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

353
Views
Realice diferentes acciones basadas en elementos dentro de LazyColumn en la composición de Android, diferentes eventos onClick

Estoy creando una página de perfil para la aplicación y necesito realizar diferentes acciones en función de los elementos en los que se hace clic dentro LazyColumn .

Lo que quiero es cuando hago clic en Califícanos, Play Store para abrir, haga clic en comentarios, el navegador debería abrirse, al hacer clic en configuración, el usuario debería navegar a la pantalla de configuración. Cómo realizar acciones tan diferentes en el oyente de clics de LazyColumn .

Aquí está el código,

ProfileListModel.kt

 data class ProfileListModel( val imageVector: ImageVector, @StringRes val contentDescription: Int, @StringRes val text: Int )

ProfileListRepository.kt

 class ProfileListRepository { fun getAllData(): List<ProfileListModel> { return listOf( ProfileListModel( imageVector = Icons.Default.InvertColors, contentDescription = R.string.app_theme, text = R.string.app_theme ), ProfileListModel( imageVector = Icons.Default.NoAccounts, contentDescription = R.string.turn_on_incognito, text = R.string.turn_on_incognito ), ProfileListModel( imageVector = Icons.Default.Language, contentDescription = R.string.app_language, text = R.string.app_language ), ProfileListModel( imageVector = Icons.Default.Settings, contentDescription = R.string.settings, text = R.string.settings ), ProfileListModel( imageVector = Icons.Default.ModeOfTravel, contentDescription = R.string.drive_mode, text = R.string.drive_mode ), ProfileListModel( imageVector = Icons.Default.ChildCare, contentDescription = R.string.child_mode, text = R.string.child_mode ), ProfileListModel( imageVector = Icons.Default.BarChart, contentDescription = R.string.time_watched, text = R.string.time_watched ), ProfileListModel( imageVector = Icons.Default.Storage, contentDescription = R.string.account_data, text = R.string.account_data ), ProfileListModel( imageVector = Icons.Default.StarRate, contentDescription = R.string.rate_us_on_play_store, text = R.string.rate_us_on_play_store ), ProfileListModel( imageVector = Icons.Default.Feedback, contentDescription = R.string.feedback, text = R.string.feedback ), ProfileListModel( imageVector = Icons.Default.Forum, contentDescription = R.string.forum, text = R.string.forum ), ProfileListModel( imageVector = Icons.Default.HelpCenter, contentDescription = R.string.help_center, text = R.string.help_center ), ProfileListModel( imageVector = Icons.Default.PrivacyTip, contentDescription = R.string.privacy_policy, text = R.string.privacy_policy ), ProfileListModel( imageVector = Icons.Default.ControlPointDuplicate, contentDescription = R.string.terms_of_service, text = R.string.terms_of_service ) ) } }

ProfileListItem.kt

 @Composable fun ProfileListItem(profileListModel: ProfileListModel) { Row( modifier = Modifier .fillMaxWidth() .wrapContentHeight() .clickable( onClick = { /*todo("perform different actions based upon item clicked")*/ } ) /*.clickable { selectedItem(profileListModel) }*/ .padding(all = 16.dp), verticalAlignment = Alignment.CenterVertically ) { Icon( imageVector = profileListModel.imageVector, contentDescription = stringResource(id = profileListModel.contentDescription), tint = MaterialTheme.colorScheme.onBackground, modifier = Modifier.padding(end = 16.dp) ) Text( modifier = Modifier.wrapContentSize(), text = stringResource(id = profileListModel.text) ) } }

ProfileScreen.kt

 @ExperimentalMaterial3Api @Composable fun ProfileScreen() { Box(modifier = Modifier.fillMaxSize()) { Surface(color = MaterialTheme.colorScheme.background) { ProfileList() } } } @ExperimentalMaterial3Api @Composable fun ProfileList() { val profileListRepository = ProfileListRepository() val getAllData = profileListRepository.getAllData() LazyColumn( modifier = Modifier .fillMaxWidth() .wrapContentHeight() ) { item { ProfileCard() } item { NightLight() } itemsIndexed(items = getAllData) { index, profileListModel -> ProfileListItem(profileListModel = profileListModel) } } } @Composable fun NightLight() { val checkedState = remember { mutableStateOf(false) } Row( modifier = Modifier .fillMaxWidth() .wrapContentHeight() .clickable(onClick = { checkedState.value = !checkedState.value }) .padding(horizontal = 16.dp, vertical = 10.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row(modifier = Modifier.wrapContentSize(), verticalAlignment = Alignment.CenterVertically) { Icon( imageVector = Icons.Default.ModeNight, contentDescription = stringResource(id = R.string.night_light), tint = MaterialTheme.colorScheme.onBackground, modifier = Modifier.padding(end = 16.dp) ) Text( modifier = Modifier.wrapContentSize(), text = stringResource(id = R.string.night_light) ) } Switch(checked = checkedState.value, onCheckedChange = { checkedState.value = it }) } } @ExperimentalMaterial3Api @Composable fun ProfileCard( modifier: Modifier = Modifier ) { Card( modifier = modifier .fillMaxWidth() .wrapContentHeight() .padding(all = 16.dp), shape = RoundedCornerShape(size = 16.dp), elevation = CardDefaults.cardElevation(defaultElevation = 1.dp) ) { Column( modifier = Modifier.padding(all = 16.dp) ) { Row( modifier = Modifier .fillMaxWidth() .wrapContentHeight(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { Text(text = "Click to login") Image( painter = painterResource(id = R.drawable.avatar), contentDescription = "avatar", contentScale = ContentScale.Crop, modifier = Modifier .size(size = 72.dp) .clip(shape = CircleShape) ) } Row( modifier = Modifier .fillMaxWidth() .wrapContentHeight() .padding(vertical = 8.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { Text(text = "Level 0") Card( modifier = Modifier.wrapContentSize(), shape = RoundedCornerShape(size = 16.dp), elevation = CardDefaults.cardElevation(defaultElevation = 3.dp) ) { Text( text = "Check in", modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) } } Row( modifier = Modifier .fillMaxWidth() .wrapContentHeight() .padding(top = 16.dp) ) { Column( modifier = Modifier .wrapContentHeight() .weight(1f) ) { Text(text = "0") Text(text = "Social reputation") } Column( modifier = Modifier .wrapContentHeight() .weight(1f) ) { Text(text = "0", modifier = Modifier.fillMaxWidth()) Text(text = "Credit score", modifier = Modifier.fillMaxWidth()) } } } } } @ExperimentalMaterial3Api @Preview( showBackground = true, name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO or Configuration.UI_MODE_TYPE_NORMAL ) /*@Preview( showBackground = true, name = "Night mode", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL )*/ @Composable fun ProfileScreenPreview() { ProfileScreen() }
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Puede pasar una identificación para identificar el elemento en el que se hace clic y luego, cuando se hace clic en el elemento, devolver esa identificación a su modelo de vista. De esto se trata el flujo unidireccional en Compose. Ejemplo:

 @ExperimentalMaterialApi class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) startActivity(intent) setContent { ProfileList( onItemClick = {itemId -> viewmodel.handleItem(itemId) } ) } } } @Composable fun ProfileList( onItemClick: (itemId: MenuItemIDs) -> Unit ) { val profileListRepository = ProfileListRepository() val getAllData = profileListRepository.getAllData() LazyColumn( modifier = Modifier .fillMaxWidth() .wrapContentHeight() ) { item { ProfileCard( itemId = MenuItemIDs.ProfilCard, onItemClick = onItemClick ) } item { NightLight() } itemsIndexed(items = getAllData) { index, profileListModel -> ProfileListItem(profileListModel = profileListModel) } } } @Composable fun ProfileCard( modifier: Modifier = Modifier, itemId: MenuItemIDs, onItemClick: (itemId: MenuItemIDs) -> Unit ) { Card( modifier = modifier .fillMaxWidth() .wrapContentHeight() .padding(all = 16.dp) .clickable { onItemClick(itemId) } ) { } } enum class MenuItemIDs { ProfilCard, NightLight, AppTheme, blah, blah, blah... }
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!