Question

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

但是我找不到任何解决方案来将像元的宽度设置为采用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 })
        }
    }

Answer 1

关键是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 })
    }
}

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

或者现在，您可以使用伴奏寻呼机库。 https://github.com/google/accompanist/tree/main/pager

如何在Android Jetpack Compose ui中实现水平滚动条？

4 个答案: