android - 如何在 android jetpack compose ui 中实现水平滚动条？

Question

我正在尝试使用 jetpack compose 实现水平滚动视图，如下所示：

但我找不到任何解决方案来设置单元格的宽度以采用 16dp 边距的屏幕宽度，这就是我得到的：

这是我的代码：

private val imageList : Array<Effect<Image>> =arrayOf(
        imageResource(R.drawable.maldive),
        imageResource(R.drawable.maldiveone),
        imageResource(R.drawable.maldivetwo))

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            createList()
        }


    }

    @Composable
    fun createList(){
        MaterialTheme() {
            HorizontalScroller(){
                Row(crossAxisSize = LayoutSize.Expand) {
                    (0..3).forEachIndexed { _, i ->
                            populateListItem(i)
                    }
                }
            }
        }
    }
    @Composable
    fun populateListItem(index: Int){
                Column(crossAxisSize = LayoutSize.Wrap, modifier = Spacing(16.dp)) {
                    Card(elevation = 0.dp, shape = RoundedCornerShape(8.dp, 8.dp, 8.dp, 8.dp)) {
                        val im: Image = +imageList[index.rem(3)]
                        Container(expanded = true,height = 180.dp)
                         {
                            DrawImage(image = im)
                        }
                    }
                    HeightSpacer(height = 16.dp)
                    Text("Maldive $index",
                        style = +themeTextStyle { h6 })
                    Text("Enjoy Our $index Resort!",
                        style = +themeTextStyle { body2 })
        }
    }

score 1 · Accepted Answer

只需在此处添加我的解决方案...

@Composable
fun HorizontalScrollScreen() {
    // replace with your items...
    val items = (1..10).map { "Item $it" } 
    // a wrapper to fill the entire screen
    Box(modifier = Modifier.fillMaxSize()) { 
        // BowWithConstraints will provide the maxWidth used below
        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
            // LazyRow to display your items horizontally
            LazyRow(
                modifier = Modifier.fillMaxWidth(),
                state = rememberLazyListState()
            ) {
                itemsIndexed(items) { index, item ->
                    Card(
                        modifier = Modifier
                            .height(100.dp)
                            .width(maxWidth) // here is the trick
                            .padding(16.dp)
                    ) {
                        Text(item) // card's content
                    }
                }
            }
        }
    }
}

此实现有效，但您不会有 snap 行为。此行为不受开箱即用的支持（该https://issuetracker.google.com/issues/166590434LazyRow的功能请求），但您可以尝试使用参数实现此功能。flingBehavior

或者现在，您可以使用 Accompanist Pager 库。 https://github.com/google/accompanist/tree/main/pager

score 1 · Accepted Answer

关键是resources.displayMetrics.widthPixels，这会很神奇。用下面替换您的 populateListItem 函数，它将起作用

@Composable
fun populateListItem(index: Int) {
    val padding = 16
    val dm = resources.displayMetrics
    val cardWidth = dm.widthPixels/dm.density - 16 * 2 // 2 is multiplied for left and right padding
    Column(crossAxisSize = LayoutSize.Wrap, modifier = Spacing(padding.dp)) {
        Card(elevation = 0.dp, shape = RoundedCornerShape(8.dp, 8.dp, 8.dp, 8.dp)) {
            val im: Image = +imageList[index.rem(3)]
            Container(width = cardWidth.dp, height = 180.dp)
            {
                DrawImage(image = im)
            }
        }
        HeightSpacer(height = 16.dp)
        Text("Maldive $index",
            style = +themeTextStyle { h6 })
        Text("Enjoy Our $index Resort!",
            style = +themeTextStyle { body2 })
    }
}

score 0 · Accepted Answer

从 JetPack Compose 1.0.0-beta01BoxWithConstraints开始，用于获取屏幕的最大宽度和高度，并根据需要将其传递给带@Composable注释的函数和修饰符。

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth)
    }
}

文档：https ://developer.android.com/jetpack/compose/layout#constraints

score 0 · Accepted Answer

您希望您的子项目的宽度是 match_parent 对吗？你应该com.google.accompanist:accompanist-pager:0.8.1从谷歌使用。它看起来像水平的viewpager

链接：https ://google.github.io/accompanist/pager/

android - 如何在 android jetpack compose ui 中实现水平滚动条？

4 回答 4

Related

Reference