https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

08/26/2020, 7:02 PM
Haven't used compose heavily, but watching @nickbutcher video from today. You can have a padding modifier, then a background, then padding in order to "simulate" margin. Does that mean margin is non-existent anymore?
g

George Mount

08/26/2020, 7:03 PM
Yes, there is no special case for "margin." Padding is space that is around something, so you can use padding to give you margin.
Unlike Android Views, padding isn't a property, so you can add it wherever you like to give you something that acts like an Android margin or something that acts like an Android padding.
c

Colton Idle

08/26/2020, 7:05 PM
Interesting... this reminds me of a twitter/blog post I read somewhere saying that margin is bad. Now I have to try to dig it up and re-read. 😄
I think this was the article? https://mxstbr.com/thoughts/margin
The article actually favors spacers. Not that this is directly tied to compose, but curious about hearing @nickbutcher @cb thoughts?
j

Javier

08/26/2020, 7:25 PM
I think @Leland Richardson [G] had some article or he commented it in a video, or even here in this channel
r

romainguy

08/26/2020, 7:36 PM
it depends why you are using padding/margin
if it’s to separate elements in a column, I agree that spacers are better
in Nick’s example from the screenshot above, padding is the right semantic
l

Leland Richardson [G]

08/26/2020, 7:50 PM
Max’s post is pretty relevant when it comes to the design decisions we made. Modifiers are designed so that they don’t break encapsulation. everything “below” that modifier is set in stone, modifiers allow you to change “above” it. This is why the pattern I showed in my video released today is a reasonable thing to do. In your composable, on the root node, instead of doing
Copy code
@Composable fun MyComponent() { 
  SomeLayout(Modifier.foo(..).bar(…)) { ... } 
}
You are able to do
Copy code
@Composable fun MyComponent(modifier: Modifier = Modifier) {
  SomeLayout(modifier.foo(..).bar(..)) { ... } 
}
without breaking encapsulation
👍 2
this allows for the padding modifier to be a spacing primitive, as well as serve as the way to do “padding” in the CSS sense
c

Colton Idle

08/27/2020, 3:29 AM
@Leland Richardson [G] awesome. Thanks for the insight. "as well as serve as the way to do "padding" in the CSS sense" I don't do too much web dev, can you explain the relation to CSS here? Doesn't css have a similar box model to android xml where you have padding and margin?
l

Leland Richardson [G]

08/27/2020, 3:32 AM
i guess its not specific to web really. what i mean is like “internal padding”, so in the “padding vs margin” semantic, padding is part of the component itself. and if you had a border, background, width, etc, padding would be included in that. padding in compose can be used as an implementation detail of a composable, and used “below” a border or background modifier for instance, and it behaves exactly this way. Or it can be used outside of the implementation by it being passed in as a modifier parameter and used as the start of the modifier chain. In this case it will behave more closely to what we would think of as “margin”
c

Colton Idle

08/27/2020, 3:35 AM
Thanks for clarifying!
l

Leland Richardson [G]

08/27/2020, 3:38 AM
np!
2 Views