使用 Jetpack Compose 和伴奏寻呼机,我正在尝试创建一个HorizontalPager
where:
- 显示当前项目左侧和右侧的项目边缘
Pager
物品有一个最大宽度
例如,我编写了以下代码(为了简单起见,我制作了Text
物品,但实际上,我实际上制作了更复杂的Card
物品):
@Composable
fun MyText(modifier: Modifier) {
Text(
text = LOREM_IPSUM_TEXT,
modifier = modifier
.wrapContentHeight()
.border(BorderStroke(1.dp, Color.Red))
)
}
@ExperimentalPagerApi
@Composable
fun MyPager(pagerItem: @Composable () -> Unit = {}) {
Scaffold {
Column(
modifier = Modifier
.fillMaxSize()
// In case items in the VP are taller than the screen -> scrollable
.verticalScroll(rememberScrollState())
) {
HorizontalPager(
contentPadding = PaddingValues(32.dp),
itemSpacing = 16.dp,
count = 3,
) {
pagerItem()
}
}
}
}
@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_200dpWidth() {
MyPager { MyText(modifier = Modifier.widthIn(max = 200.dp)) }
}
@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_500dpWidth() {
MyPager { MyText(modifier = Modifier.widthIn(max = 500.dp)) }
}
@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_FillMaxWidth() {
MyPager { MyText(modifier = Modifier.fillMaxWidth()) }
}
我遇到的问题是,当我使项目的最大宽度似乎小于屏幕宽度(请参阅 参考资料MyPager_200dpWidth
)时,我再也看不到侧面的项目了。另一方面,使用最大宽度(见)或(见)较大的项目可以让我看到侧面的项目。MyPager_500dpWidth
fillMaxWidth
MyPager_FillMaxWidth
在我看来,最大宽度较小的项目实际上比最大宽度较大的项目占用了更多的水平空间。这可以显示在预览部分...
看看左边的图像 ( MyPager_500dpWidth) and middle (
MyPager_FillMaxWidth ) show the next item, while the image on the right (
MyPager_200dpWidth`) 是如何占据整个屏幕的?这是将鼠标悬停在项目上以查看骨架框时的另一个比较...
只是想知道是否有人可以帮助我弄清楚如何解决这个用例。Compose中是否有可能存在错误?