Forms
FormLayoutFilled
val focusManager = LocalFocusManager.current LazyColumn(modifier = Modifier.widthIn(max = 480.dp), verticalArrangement = Arrangement.spacedBy(12.dp), contentPadding = PaddingValues(vertical = 24.dp)) { item { Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(12.dp)) { Surface(onClick = { /* TODO */ }, color = MaterialTheme.colorScheme.surfaceVariant, shape = CircleShape) { Box(modifier = Modifier.size(96.dp), contentAlignment = Alignment.Center) { Icon(imageVector = Icons.Outlined.CameraAlt, contentDescription = null, tint = MaterialTheme.colorScheme.onSurfaceVariant) } } Text("Add photo") } } item { var imageUrl = remember { mutableStateOf<String?>(null) } Box(Modifier.fillMaxWidth()) { AsyncImage(model = imageUrl, contentDescription = null) } } item { var text by remember { mutableStateOf("") } TextField(modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("First name") }, value = text, onValueChange = { text = it }, singleLine = true, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next, capitalization = KeyboardCapitalization.Words), keyboardActions = KeyboardActions { focusManager.moveFocus(FocusDirection.Next) }) } item { var text by remember { mutableStateOf("") } TextField(modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Last name") }, value = text, onValueChange = { text = it }, singleLine = true, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next, capitalization = KeyboardCapitalization.Words), keyboardActions = KeyboardActions { focusManager.moveFocus(FocusDirection.Next) }) } item { Spacer(Modifier.height(4.dp)) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Phone number") }, value = text, onValueChange = { text = it }, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone, imeAction = ImeAction.Next), keyboardActions = KeyboardActions { focusManager.moveFocus(FocusDirection.Next) }, singleLine = true, ) } item { Spacer(Modifier.height(4.dp)) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Email") }, value = text, onValueChange = { text = it }, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Done), keyboardActions = KeyboardActions { focusManager.clearFocus() }, singleLine = true, ) } item { Spacer(Modifier.height(4.dp)) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), value = text, onValueChange = { text = it }, label = { Text("Country") }, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, ) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Street address") }, value = text, onValueChange = { text = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next), keyboardActions = KeyboardActions { focusManager.moveFocus(FocusDirection.Next) }, singleLine = true, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, ) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("City") }, value = text, onValueChange = { text = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next), keyboardActions = KeyboardActions { focusManager.moveFocus(FocusDirection.Next) }, singleLine = true, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, ) } item { var text by remember { mutableStateOf("") } TextField( modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Zip/postal code") }, value = text, onValueChange = { text = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done), keyboardActions = KeyboardActions { focusManager.clearFocus() }, singleLine = true, trailingIcon = { AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) { IconButton(onClick = { text = "" }) { Icon(Icons.Outlined.Cancel, "Clear") } } }, ) } item { Text(text = "Groups", style = MaterialTheme.typography.titleMedium, modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 24.dp, bottom = 8.dp)) } item { var selected by remember { mutableStateOf<Int?>(null) } val options = listOf("Family", "Friends", "Work", "Other") Column { options.forEachIndexed { i, option -> Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = i }.fillMaxWidth().padding(16.dp)) { RadioButton(selected = selected == i, onClick = null) Text(text = option) } } } } item { Text(text = "Notification Options", style = MaterialTheme.typography.titleMedium, modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 24.dp, bottom = 8.dp)) } item { var selected by remember { mutableStateOf(false) } Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = selected.not() }.fillMaxWidth().padding(16.dp)) { Checkbox(checked = selected, onCheckedChange = null) Text(text = "Override 'Do not Disturb'") } } item { var selected by remember { mutableStateOf(false) } Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = selected.not() }.fillMaxWidth().padding(16.dp)) { Checkbox(checked = selected, onCheckedChange = null) Text(text = "Block calls from this contact") } } }
@Composable
fun NiceTry(){
Column {
BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
}
}
@Composable
fun NiceTry(){
Column {
BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
}
}
Phone
Sit tight. We are loading your preview
FormLayoutFilled