https://kotlinlang.org logo
Join Slack
Powered by
I have a layout like so: ```Box(fillMaxWidth) { ...
# compose
t
I have a layout like so:
Copy code
Box(fillMaxWidth) {
   Row(horizontalScroll) {
      items.forEach {
          Column(width(<boxWidth here>) {
          }
       }
   }
}
I want to dynamically change the inner column width to be the same as the ancestor box (it should be width of device), or some percentage (half or quarter). How can I reference the Box width in order to size the Column(s) properly? Thank you!
z
I think 
matchParentSize()
on the 
BoxScope
might work for this? But only if your row is already matching the box height. https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope#(androidx.compose.ui.Modifier).matchParentSize()
t
That is the issue. My Row is scrollable and can be any size.
z
Vertically scrollable too?
t
sorry, no. there is vertical scroll but further down in the tree
i tried to get the boxScope via:
Copy code
Box(modifier = Modifier.fillMaxWidth()) { boxScope ->
but it then creates errors in my tree
z
that's not valid kotlin, the 
BoxScope
is the lambda receiver.
So 
matchParentSize()
doesn't do the right thing?
t
i am saving off the matchParentSize and using in the column, but not doing what i had hoped
Copy code
Box(modifier = Modifier.fillMaxWidth()) {
                val boxSize = Modifier.matchParentSize()
                Row(modifier = Modifier
                    .horizontalScroll(rememberScrollState())) {

                    book.staff.forEach { staff ->
                        Column(
                            //modifier = boxSize
                            modifier = boxSize //Modifier
                                //boxScope.matchParentSize()
                                //.fillMaxWidth(1.0f)
                                //.width(320.dp)
                        )
z
Huh, well another approach would be to use 
BoxWithConstraints
and then just pass the 
width
modifier with the 
maxWidth
t
okay, i will look into that. thanks!
The BoxWithConstraints works as I like. But the performance also went down the crapper.
z
how so?
t
whereas it was silky smooth scrolling, now it jumps around when scrolling
z
Like it's skipping frames, or something in the layout is changing and making scroll position change unexpectedly?
t
more like skipping frames.
feels like it is likely recomposing a lot more now. will be experimenting
z
Hm, might be worth actually filing a performance bug with repro code. I wouldn't think scrolling should cause the outer container to do that much more work, unless there's something else in your code that i'm not seeing that's causing it.
t
I will see if I can get a sample together. Just chaning to the BoxWithConstraint changed it from the Box, so I am pretty sure that is it.
z
I would be less surprised if the BWC were inside the scrollable thing, but since it's outside that seems really weird
w
you might be able to tag internal components to ensure they aren’t being recomposed?
a
You can also use a 
LazyRow
instead of a 
Row
so that you can use 
Modifier.fillParentMaxWidth()
on the `Column`s.
Copy code
Box(fillMaxWidth) {
   LazyRow {
      items(items) {
          Column(fillParentMaxWidth) {
          }
       }
   }
}
Didn’t try but I think it should work.
t
I actually started with a LazyRow, and performance there was terrible too. I know exactly how many columns I need, so plain old Row seemed the better fit. Thanks.
a
Whether you know the count of items or not has nothing to do with whether you should use lazy list. The main criteria is whether you have or could have many off-screen items. In your case every item is full screen width so actually lazy list seems a better choice.
☝🏻 1
t
Yes, you are right. I was conflating the issues. Bottom line is I tried the LazyRow, and performance is unusable, and Row is not. So for now I will use Row, but will try LazyRow in each new version to see if things improve. Thanks.
52 Views
Open in Slack
PreviousNext
Powered by