[英]How to move focus from one component to another in Jetpack compose?
I am trying to move the focus from one component to another on a button click.我试图通过单击按钮将焦点从一个组件移动到另一个组件。 I have this code right now.
我现在有这段代码。
...
Column(
modifier = Modifier
.fillMaxSize()
.statusBarsPadding()
.navigationBarsPadding()
.background(surfaceColors.surface)
) {
TopBar(
TopBarState(
endText = if (theViewPages[state.currentPageIndex].isShowSkip) stringResource(id = R.string.Skip) else null,
onEndTextPressed = { store.dispatch(TheViewAction.OnSkip) },
isBackButtonVisible = false
) //need to focus on this component when user clicks on button
)
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxHeight()
) {
HorizontalPager(
HorizontalPagerState(
modifier = Modifier
.aspectRatio(1f / 1.5f),
count = theViewPages.size,
onPageChange = { store.dispatch(TheViewAction.OnPageChange(it)) },
manuallyScrollPage = state.manuallyScrollPage,
content = { currentPage ->
TheItemView(
item = TheViewItemModel(
theViewPages[currentPage].isShowSkip,
theViewPages[currentPage].title,
theViewPages[currentPage].image,
theViewPages[currentPage].description,
theViewPages[currentPage].buttonText
),
onButtonClick = {
if (state.currentPageIndex != theViewPages.size - 1) {
//when user clicks this button focus moves to above component
store.dispatch(TheViewAction.ManuallyScrollPage)
} else {
store.dispatch(TheViewAction.OnGettingStarted)
}
}
)
}
)
)
}
}
...
and I have this TheItemView
我有这个
TheItemView
@Composable
fun TheItemView(
item: TheViewItemModel,
onButtonClick: () -> Unit
) {
val typoColors = EnhanceTheme.colors.typoColors
val defaultPadding = dimensionResource(id = DesignSystem.dimen.borderDefault)
val largePadding = dimensionResource(id = DesignSystem.dimen.large)
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
...
Text(
text = "ABCDF",
modifier = Modifier.padding(horizontal = largePadding)
)
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.weight(1f)
) {
Button(
buttonState =
ButtonState(
label = "TEST,
onClick = onButtonClick,
)
)
}
...
}
}
I want to do this for accessibility.我想这样做是为了可访问性。 I have tried couple of option online but none of them worked.
我在网上尝试了几个选项,但都没有用。 tried this Jetpack Compose: Move focus between TextFields using D-Pad without onKeyEvent already and similar Thanks.
尝试了这个Jetpack Compose:在没有 onKeyEvent 的情况下使用方向键在 TextFields 之间移动焦点,类似的谢谢。
You can use FocusRequester您可以使用FocusRequester
Step 1第1步
val scope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
Step 2第2步
Attach FocusRequester
to the modifier
of target composable将
FocusRequester
附加到目标可组合项的modifier
Modifier.focusRequester(focusRequester)
Step 3步骤 3
Request focus like this inside onClick
lambda像这样在里面请求焦点
onClick
lambda
scope.launch { focusRequester.requestFocus() }
Example例子
Surface(
modifier = Modifier.padding(16.dp),
color = MaterialTheme.colorScheme.background
) {
val scope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(
modifier = Modifier
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
OutlinedTextField(
value = email,
onValueChange = { email = it },
modifier = Modifier
.fillMaxWidth(),
placeholder = {
Text(text = "email")
}
)
OutlinedTextField(
value = password,
onValueChange = { password = it },
modifier = Modifier
.fillMaxWidth()
.focusRequester(focusRequester),
placeholder = {
Text(text = "password")
}
)
Button(onClick = {
scope.launch {
focusRequester.requestFocus()
}
}) {
Text(text = "Move focus on password field")
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.