竖向滚动如何影响Jetpack Compose中修改器权重的问题。

Question

竖向滚动如何影响Jetpack Compose中修改器权重的问题。

androidkotlinandroid-jetpack-composeandroid-jetpack

8

我希望我的按钮使用Column在屏幕底部。当我尝试在较小的设备上显示时，我的内容无法滚动。所以我在 stack overflow 上搜索并找到了这个答案。当我添加时，

.verticalScroll(rememberScrollState())

在我的修饰符中，它破坏了间隔权重，并将我的按钮放置在顶部。输入 @Composable

fun Input() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(10.dp)
    ) {
        Item()
    }
}

项目

@Composable
fun Item {
    Image()
    Text() // more item here
    Pressure()
}

压力

@Composable
fun Pressure() {
      var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
         mutableStateOf(TextFieldValue())
      }
    Column {
        Text(value)
        Image()
        // more item here
        Spacer(modifier = Modifier.weight(1f))
        OnSubmit(value)
    }
}

实际输出

期望输出

我希望我的按钮在小设备上位于底部，并且带有垂直滚动。

更新

在尝试了@SemicolonSpace的代码之后，我的按钮现在被屏幕遮挡了。

fun Input() {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.SpaceBetween
        ){
          Column(
              modifier = Modifier
                  .verticalScroll(rememberScrollState())
                  .padding(10.dp)
          ) {
              Item()
          }
          // behind from screen
          OnSubmit()
       }
    }

你可以看到我的按钮在屏幕后面，我无法滚动。

- Vivek Modi

2个回答

1

最终工作代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BlogPostsTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MyUI()
                }
            }
        }
    }
}

@Composable
fun MyUI() {
    val longText = """
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    """.trimIndent()

    
    Box(
        modifier = Modifier.fillMaxHeight()
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .padding(10.dp)
        ) {
            // your UI here
            Text(
                text = longText,
                fontSize = 20.sp
            )
        }

        // your button here
        Button(
            modifier = Modifier.align(alignment = Alignment.BottomCenter),
            onClick = { }
        ) {
            Text(text = "Button")
        }
    }
}

- SemicolonSpace

我也更新了我的代码。你能指导一下我吗？你把我的Button从Pressure组件移到了父级Column中。所以请指导我如何获取新的值。 - Kotlin Learner

移除子Column的fillMaxSize()。我已经更新了代码。 - SemicolonSpace

小设备中的垂直滚动不起作用。 - Kotlin Learner

我搞砸了。父布局应该是 Box。将可滚动的 Column 和 Button 放在一个 Box 中，并将 Button 放在底部。请查看更新后的代码。我已经测试过了，它可以正常工作。如果按钮重叠，请为可滚动的 Column 添加底部填充。 - SemicolonSpace

我非常感激。 - Kotlin Learner

显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thracian · Accepted Answer

我不知道您遇到的问题具体是什么。我制作了一个与图片中类似结构的示例，并且看起来如果没有漏掉任何东西，它应该可以正常工作。

@Composable
private fun MyComposable() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(10.dp)
    ) {
        var text by remember { mutableStateOf("") }
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")
        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier = Modifier.weight(1f))
        Button(modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color(0xff4DD0E1),
                contentColor = Color.White
            )
            , onClick = { /*TODO*/ }) {
            Text("Submit", modifier = Modifier.padding(vertical = 20.dp))
        }
    }

}