垂直滾動影響噴氣背包組合中的修改器重量

Question

我希望我的按鈕使用Column位於屏幕底部。 當我嘗試縮小設備時，我的內容不可滾動。 所以我在堆棧溢出中搜索並找到了這個答案。 當我添加

.verticalScroll(rememberScrollState())

在我的修改器中，它打破了間隔重量的東西並將我的按鈕放在頂部。

輸入

@可組合

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)
    }
}

實際 Output

預計 Output

我希望我的按鈕在較小的設備中具有垂直滾動的底部。

更新

在@SemicolonSpace 之后我嘗試了代碼並且我的按鈕在屏幕后面

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

你可以看到我的按鈕在屏幕后面，我無法滾動

Answer 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")
        }
    }
}

Answer 2

我不知道你到底在哪里面臨這個問題。 我制作了一個與圖像結構相似的樣本，如果我沒有遺漏任何東西，它看起來效果很好。

@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))
        }
    }

}