滚动到底部监听器 Jetpack Compose

huangapple go评论86阅读模式
英文:

Scroll to bottom listener Jetpack Compose

问题

我有一个页面,我想要让它可以滚动(主要是文本,没有列表)。在页面底部,我有一个禁用的按钮,但当我滚动到页面底部时,我想要激活该按钮。如何在Jetpack Compose Kotlin androidx.compose.ui版本1.3.2中实现这个功能?

提前非常感谢!

因为Compose库的原因,我不能使用ScrollableColumnScrollableLazyColumnLazyRow

英文:

I have a page that I want to be scrollable (mostly text only, no list). At the bottom of that page I have a disabled button, but when I reach the bottom of the page I want that button to activate. How can I do this with JetpackCompose Kotlin androidx.compose.ui version 1.3.2?

Much appreciation in advance!

I can't use ScrollableColumn, Scrollable, LazyColumn, LazyRow because of the compose library.

答案1

得分: 1

It's not clear why you can't use these components since they are all part of the Compose library. However, this can be done using Column composable with verticalScroll modifier.

val scrollState = rememberScrollState()
Column(Modifier.verticalScroll(scrollState)) {
        //文本
    }

启用按钮的状态,默认为 false:

val isButtonEnabled by remember {mutableStateOf(false)}

ScrollState 有一个名为 canScrollForward 的布尔属性,false 表示我们不能向前滚动(已经到达列表末尾)。一旦这里为 false,按钮应该启用。

LaunchedEffect(scrollState.canScrollForward) {
    if (!scrollState.canScrollForward) isButtonEnabled = true
}

和按钮:

Button(enabled = isButtonEnabled, ...)
英文:

It's not clear why you can't use these components since they are all part of the Compose library. However, this can be done using Column composable with verticalScroll modifier.

val scrollState = rememberScrollState()
Column(Modifier.verticalScroll(scrollState)) {
        //Text
    }

State for enabling Button, false by default:

val isButtonEnabled by remember {mutableStateOf(false)}

ScrollState has canScrollForward Boolean property, false means we cannot scroll forward (we are the end of the list). Once we have false here, button should be enabled

LaunchedEffect(scrollState.canScrollForward) {
    if (!scrollState.canScrollForward) isButtonEnabled = true
}

And button:

Button(enabled = isButtonEnabled, ...)

答案2

得分: 0

以下是代码的翻译部分:

@Composable
override fun Build() {

    val scrollState = rememberScrollState()
    val isButtonEnabled by remember {mutableStateOf(false)}
    LaunchedEffect(scrollState.canScrollForward) {
        if (!scrollState.canScrollForward) isButtonEnabled = true
    }

    ScreenScaffold(
        header = {
            TopBar(
                title = R.string.insurance_choose_insurance_travel,
                onBack = { sendNavEffect.invoke(Effect.Navigation.OnBack) },
                actions = {},
                backgroundColor = white
            )
        },
        page = {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(20.dp)
                    .verticalScroll(scrollState)
            ){
                repeat(100){
                    Text(
                        "Text",
                        color = Color.Black
                    )
                }
            }
        },
        footer = {
            Row(modifier = Modifier.padding(20.dp)) {
                PrimaryActionButton(
                    text = R.string.accept_terms_and_conditions_sca.getString(),
                    buttonState = if(isButtonEnabled) ButtonState.Active else ButtonState.Disabled,
                    onClick = {}
                )
            }
        })
}

请注意,我已经将双引号中的 "Text" 更改为正常的字符串 "Text",因为在代码中使用正常字符串是正确的。

英文:
@Composable
override fun Build() {

    val scrollState = rememberScrollState()
    val isButtonEnabled by remember {mutableStateOf(false)}
    LaunchedEffect(scrollState.canScrollForward) {
        if (!scrollState.canScrollForward) isButtonEnabled = true
    }

    ScreenScaffold(
        header = {
            TopBar(
                title = R.string.insurance_choose_insurance_travel,
                onBack = { sendNavEffect.invoke(Effect.Navigation.OnBack) },
                actions = {},
                backgroundColor = white
            )
        },
        page = {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(20.dp)
                    .verticalScroll(scrollState)
            ){
                repeat(100){
                    Text(
                        "Text",
                        color = Color.Black
                    )
                }
            }
        },
        footer = {
            Row(modifier = Modifier.padding(20.dp)) {
                PrimaryActionButton(
                    text = R.string.accept_terms_and_conditions_sca.getString(),
                    buttonState = if(isButtonEnabled) ButtonState.Active else ButtonState.Disabled,
                    onClick = {}
                )
            }
        })
}

}

huangapple
  • 本文由 发表于 2023年2月10日 05:41:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75404701.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定