Jetpack Compose Material3 SettingsScreen https://android.benigumo.com/20241127/jetpack-compose-material3-listitem/

SettingScreen.kt

@Composable
fun SettingsScreen(
  modifier: Modifier = Modifier,
  viewModel: SettingsViewModel = hiltViewModel()
) {
  val on = viewModel.on.collectAsState()

  LazyColumn{
    items(10) {
      OutlinedCard(
        modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp)
      ) {
        Text(
          text = "Network",
          modifier = modifier.padding(16.dp),
        )

        // clickable
        ListItem(
          headlineContent = { Text("Advanced tracking") },
          modifier = modifier.clickable { Timber.d("clicked.") },
          leadingContent = {
            Icon(Icons.Filled.Wifi, contentDescription = "Wifi",)
          },
          trailingContent = {
            Icon(Icons.Filled.ChevronRight, contentDescription = "Click")
          }
        )

        HorizontalDivider()

        // switch
        ListItem(
          headlineContent = { Text("Advanced tracking") },
          leadingContent = {
            Icon(Icons.Filled.Wifi, contentDescription = "Wifi",)
          },
          trailingContent = {
            Switch(checked = on.value, onCheckedChange = { viewModel.toggle() })
          }
        )

        HorizontalDivider()

        // checkbox
        ListItem(
          headlineContent = { Text("Advanced tracking") },
          leadingContent = {
            Icon(Icons.Filled.Wifi, contentDescription = "Wifi",)
          },
          trailingContent = {
            Checkbox(checked = on.value, onCheckedChange = { viewModel.toggle() })
          }
        )
      }
    }
  }
}

Jetpack Compose Material3 の ListItem で設定画面を秒でつくる
https://android.benigumo.com/20241127/jetpack-compose-material3-listitem/