请求用户输入 收集

通过允许用户输入文本和其他输入来使您的应用具有交互性。
@Composable
fun ValidatingInputTextField(
    state: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    TextField(
        modifier = Modifier.fillMaxWidth(),
        value = state,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,,
        supportingText = {
            if (validatorHasErrors) {
                Text("Please enter a valid email")
            }
        }
    )
}
在用户键入时验证输入，以减少信息错误并提高用户参与度。
指南 
@Composable
@Preview
fun PasswordTextField() {
  var password by rememberSaveable { mutableStateOf("") }
  var showPassword by remember { mutableStateOf(false) }
  val passwordVisualTransformation = remember { PasswordVisualTransformation() }


  TextField(
      value = password,
      onValueChange = { password = it },
      label = { Text("Enter password") },
      visualTransformation = if (showPassword) {
          VisualTransformation.None
      } else {
          passwordVisualTransformation
      },
      keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
      modifier = Modifier.fillMaxWidth(),
      trailingIcon = {
          Icon(
              painter = if (showPassword) {
                  painterResource(id = R.drawable.outline_visibility)
              } else {
                  painterResource(id = R.drawable.outline_visibility_off)
              },
              contentDescription = "Toggle password visibility",
              modifier = Modifier.clickable { showPassword = !showPassword })
      }
  )
}
根据用户切换显示或隐藏密码，以提高安全性并增强用户信任。
指南 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var phoneNumber by rememberSaveable { mutableStateOf("") }
                    val numericRegex = Regex("[^0-9]")
                    TextField(
                        value = phoneNumber,
                        onValueChange = {
                            val stripped = numericRegex.replace(it, "")
                            phoneNumber = if (stripped.length >= 10) {
                                stripped.substring(0..9)
                            } else {
                                stripped
                            }
                        },
                        label = { Text("Enter Phone Number") },
                        visualTransformation = NanpVisualTransformation(),
                        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
                    )
                }
            }
        }
    }
}

自动格式化文本字段中的电话号码

自动格式化文本字段中的电话号码，以节省用户时间。
指南 
@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}
在主应用内容之上的一层显示弹出式消息或用户输入请求。此组件创建中断性 UI 体验以吸引用户注意。
指南 
@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
使用户能够在两种状态之间切换。用户可以拖动或点击开关的滑块来更改当前状态。
指南 
@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
使用户能够从一系列连续的值中进行选择，例如设置音频音量或过滤跨一系列价格的图表数据。
指南 
@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
一种紧凑的交互式 UI 元素，用于表示复杂的实体，例如联系人或标签，通常带有图标和标签。芯片可以是可选中、可删除或可点击的。
指南

有疑问或反馈？

访问我们的常见问题页面，了解快速指南，或与我们联系并告诉我们您的想法。
前往常见问题 留下反馈