@InternalTextApi
@Composable
fun PasswordVisualTransformationInputComponent() {
// Surface is a composable provided to fulfill the needs of the "Surface" metaphor from the
// Material Design specification. It's generally used to change the background color, add
// elevation, clip or add background shape to its children composables.
// You can think of Modifiers as implementations of the decorators pattern that are used to
// modify the composable that its applied to. In this example, we assign a padding of
// 16dp to the Surface.
Surface(color = Color.LightGray, modifier = Modifier.padding(16.dp)) {
// BasicTextField is a composable that is capable of accepting text user input. It renders the
// value that you pass to the "value" field. In order to update this as the user is
// typing a new string, we make use of the state delegate.
// Reacting to state changes is the core behavior of Compose. You will notice a couple new
// keywords that are compose related - remember & mutableStateOf.remember{} is a helper
// composable that calculates the value passed to it only during the first composition. It then
// returns the same value for every subsequent composition. Next, you can think of
// mutableStateOf as an observable value where updates to this variable will redraw all
// the composable functions that access it. We don't need to explicitly subscribe at all. Any
// composable that reads its value will be recomposed any time the value
// changes. This ensures that only the composables that depend on this will be redraw while the
// rest remain unchanged. This ensures efficiency and is a performance optimization. It
// is inspired from existing frameworks like React.
var textValue by remember { mutableStateOf(TextFieldValue("Enter your password here")) }
BasicTextField(
value = textValue,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// Visual transformation is used to modify the visual output of the input field. In
// this example, I'm using an existing visual transformation - the
// PasswordVisualTransformation. All it does is that it transforms any input character
// into "•". The text itself isn't altered, just its visual appearance is. You can
// easily created you own visual transformations by implementing the
// VisualTransformation interface.
visualTransformation = PasswordVisualTransformation(),
// Update value of textValue with the latest value of the text field
onValueChange = {
textValue = it
},
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done,
keyboardType = KeyboardType.Password
)
)
}
}
visualTransformation = PasswordVisualTransformation(),
通过实现不同的visualTransformation，可以将输入内容的展示样式修改；在这里，输入内容，就展示为隐藏样式*。
