LocalContext 是一个用于获取我们在 Android 中常用的 Context 的 CompositionLocal(本地组合环境值)。
CompositionLocal 提供了一种隐式向下传递值的方式。通常我们通过参数把值一层层传给子 Composable,这样组件更模块化、可复用、易测试。但对某些被多个组件共享的数据,用隐式访问更合适——这时就用 CompositionLocal。在这个例子里,我们用 LocalContext 拿到 Context 对象。要获取某个 CompositionLocal 的最新值,使用它的 current 属性,例如:LocalContext.current。其他常见的 CompositionLocal 还有 LocalTextInputService、LocalDensity 等。
@InternalTextApi
@Composable
fun SearchImeActionInputComponent() {
// LocalContext is a LocalComposition for accessting the context value that we are used to using
// in Android.
// LocalComposition is an implicit way to pass values down the compose tree. Typically, we pass values
// down the compose tree by passing them as parameters. This makes it easy to have fairly
// modular and reusable components that are easy to test as well. However, for certain types
// of data where multiple components need to use it, it makes sense to have an implicit way
// to access this data. For such scenarios, we use LocalComposition. In this example, we use the
// LocalContext to get hold of the Context object. In order to get access to the latest
// value of the LocalComposition, use the "current" property eg - LocalContext.current. Some other
// examples of common LocalComposition's are LocalTextInputService,LocalDensity, etc.
val context = LocalContext.current
// 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),
shape = RoundedCornerShape(5.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 search query here")) }
BasicTextField(
value = textValue,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// Changing the imeAction allows you to change the primary icon of the keyboard which
// is typically shown in the bottom right corner of the keyboard. Some examples of
// ImeActions are search, send, done, go, etc.
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
// Update value of textValue with the latest value of the text field
onValueChange = {
textValue = it
},
keyboardActions = KeyboardActions(
onSearch = {
hideKeyboard(context)
}
)
)
}
}
// Changing the imeAction allows you to change the primary icon of the keyboard which // is typically shown in the bottom right corner of the keyboard. Some examples of // ImeActions are search, send, done, go, etc.
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
更改 imeAction 可以切换键盘的主按钮图标,该按钮通常显示在键盘的右下角。 ImeAction 的示例包括:search、send、done、go 等。