gpt4 book ai didi

How to allow a column in Compose to go beyond the screen boundaries - Jetpack Compose(如何让Compose中的列超越屏幕边界-Jetpack Compose)

转载 作者:bug小助手 更新时间:2023-10-24 19:50:27 39 4
gpt4 key购买 nike



I have a simple parent column with no modifiers, which can contain a similar child column also with no modifiers. The problem is that instead of going beyond the screen boundaries, the child column and its elements are either violating the paddings or even reducing the number of elements. I would like them to simply go off the screen.

我有一个没有修饰符的简单父列,它可以包含一个同样没有修饰符的类似子列。问题是,子列及其元素没有超出屏幕边界,而是违反了填充,甚至减少了元素的数量。我希望他们干脆从屏幕上消失。


All possible mods and variants

所有可能的MOD和变体


更多回答

why not use Lazy Column

为什么不使用Lazy专栏

If your element is limited then you can use verticalScroll modifier of column to make it scrollable

如果您的元素是有限的,则可以使用Column的verticalScroll修饰符使其可滚动

Please provide enough code so others can better understand or reproduce the problem.

请提供足够的代码,以便其他人能够更好地理解或重现问题。

@ChiragThummar it cant be scrollable, design :(

@ChiradThummar它不能滚动,设计:(

@Raghunandan it cant be Lazy Column, i dont need scrollable logic

@Raghunan这不可能是Lazy专栏,我不需要滚动逻辑

优秀答案推荐

Column measures children with maximum.height, by default it's not possible to go above maximum height in Constraints but there are several ways to override this behavior.

Column测量子对象的最大高度,默认情况下,在约束中不可能超过最大高度,但有几种方法可以覆盖此行为。


Basically you need to measure child Column with maxHeight Constraints.Infinity to have it height bigger than parent. You can use Modifier.wrapContentHeight(unbounded=true, alignment=Alignment.Top) or use Modifier.layout or a custom Layout to increase maxHeight to Constraints.Infinity.

基本上,您需要使用MaxHeight Constraints.Infinity测量子列,才能使其高度大于父列。您可以使用Modifier.wrapContentHeight(unbound=true,Alignment.Top)或使用Modifier.layout或自定义布局将MaxHeight增加到Constraints.Infinity。


In the sample below i set height of parent 100.dp to fit screen with other samples but in your case you can set it fillmaxSize or fillmaxHeight

在下面的示例中,我设置了父100.dp的高度以使屏幕与其他示例相匹配,但在您的示例中,您可以设置它的填充最大大小或填充最大高度


enter image description here


@Preview
@Composable
private fun ConstraintsSample() {
Column(
modifier = Modifier.fillMaxSize()
) {
Spacer(modifier = Modifier.height(30.dp))
Text("Original")
Column(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.border(3.dp, Color.Red)
) {
Column(
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Yellow)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Green)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Blue)
)
}
}

Spacer(modifier = Modifier.height(60.dp))
Text("Modifier.wrapContentHeight(unbounded = true)")

Column(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.border(3.dp, Color.Red)
) {
Column(
modifier = Modifier.wrapContentHeight(
align = Alignment.Top,
unbounded = true
)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Yellow)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Green)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Blue)
)
}
}

Spacer(modifier = Modifier.height(60.dp))
Text("Modifier.layout")

Column(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.border(3.dp, Color.Red)
) {
Column(
modifier = Modifier
.layout { measurable, constraints ->
val placeable = measurable.measure(
constraints.copy(maxHeight = Constraints.Infinity)
)
layout(
constraints.maxWidth, placeable.height
) {
val yPos = (placeable.height - constraints.maxHeight) / 2
placeable.placeRelative(0, yPos)
}
}
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Yellow)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Green)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Blue)
)
}
}

}
}

In second and third one by setting Constraints.Infinity implicitly or explicitly we let child Column to have the height it actually requires which is 150.dp. In first sample parent Column limits child Column height to 100.dp as default.

在第二个和第三个实例中,通过隐式或显式地设置Constraints.Infinity,我们让子列具有它实际需要的高度,即150.dp。在第一个示例中,父列将子列高度限制为默认的100.dp。



To make sure that the child column and its elements go off the screen instead of violating paddings or reducing the number of elements, you can use the Modifier.fillMaxSize() modifier in combination with a ScrollableColumn. Here's how you can achieve this.

若要确保子列及其元素不出现在屏幕上,而不是违反填充或减少元素数量,可以将Modifier.ill MaxSize()修饰符与ScrollableColumn结合使用。以下是如何实现这一点的方法。


import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ParentColumnWithScrollableChild() {
// Create a scroll state to make the child column scrollable
val scrollState = rememberScrollState()

Column(
modifier = Modifier
.fillMaxSize() // Fills the entire available screen size
.padding(16.dp) // Optional padding for the parent column
) {
// Parent Column
// You can add any content you want here

// Scrollable Child Column
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp), // Optional padding for the child column
state = scrollState
) {
// Add your child elements here
items(100) { index ->
// Child element
// You can add any content for child elements here
}
}
}
}

Here we use a LazyColumn for the child column, which allows for efficient recycling of items and scrolling when there are many elements. The Modifier.fillMaxSize() on the parent column ensures it takes up the entire screen space, and the Modifier.fillMaxWidth() on the child column makes sure it occupies the full width of the parent column. The rememberScrollState is used to manage the scroll position of the child column.

在这里,我们为子列使用了LazyColumn,它允许高效地回收项目,并在元素较多时滚动。父列上的Modifier.fulMaxSize()确保它占据整个屏幕空间,而子列上的Modifier.fulMaxWidth()确保它占据父列的全宽。Memory ScrollState用于管理子列的滚动位置。


Now, if the child column's content exceeds the screen boundaries, it will become scrollable, allowing you to scroll through the elements without violating paddings or reducing the number of elements displayed.

现在,如果子列的内容超出屏幕边界,它将变为可滚动,允许您在不违反填充或减少显示的元素数量的情况下滚动元素。


更多回答

i cant use LazyColumn, it cant be scrollable

我不能用LazyColumn,它不能滚动

Can you explain in detail? How can't you use LazyColumn?

你能详细解释一下吗?你怎么能不用LazyColumn呢?

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com