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

amar_1995

01/03/2020, 10:52 AM
In dev2, I am using column as below code
Copy code
Column(
   crossAxisSize = LayoutSize.Expand,
   mainAxisSize = LayoutSize.Expand) { ... }
Using this, I am trying to show hidden data after onClick occur. But it is not working dev3. In dev3, as onClick occur hidden data overlap with the next Column data. How to achieve this in dev3
Before onClick
After onClick occur
m

matvei

01/03/2020, 12:20 PM
Can you show me a snipped of the code in dev03, which is not working?
a

amar_1995

01/03/2020, 12:26 PM
Copy code
val open by +state {false}
	Padding(10.dp) {
            Clickable({
                open = !open
            }) {
                Column(
//                crossAxisSize = LayoutSize.Expand
//                    modifier = LayoutSize.Expand,
                    modifier = ExpandedWidth
                ) {
                    Row(
//                        crossAxisSize = LayoutSize.Wrap,
//                        mainAxisSize = LayoutSize.Expand
                    arrangement = Arrangement.SpaceEvenly
                    ) {
                        Column(modifier = Flexible(1f)) {
                            Text(..)
                            if(!open)
                            Text(....)
                        }
                        WidthSpacer(width = 10.dp)
                        Column(
//                            crossAxisAlignment = CrossAxisAlignment.Center,
//                            mainAxisAlignment = MainAxisAlignment.Center
                            arrangement = Arrangement.Center
                        ) {
                            Container(
                                width = 20.dp,
                                height = 20.dp,
                                alignment = Alignment.BottomCenter
                            ) {
                                DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)
                            }
                        }
                    }
                    if(open) {
                        Padding(padding = 10.dp) {
                            var value by +state { "Text" }
                            FlexColumn() {
                                expanded(1f) {
                                    Column {
                                        FlexRow() {
                                            expanded(1f) {
                                                Text("")
                                            }
                                            inflexible {
                                                Button(
                                                    text = "...",
                                                    style = OutlinedButtonStyle(
                                                        shape = RoundedCornerShape(5.dp),
                                                        contentColor = (+MaterialTheme.colors()).primary,
                                                        border = Border(
                                                            color = Color.Black,
                                                            width = 1.dp
                                                        )
                                                    ),
                                                    onClick = {
                                                        ...
                                                    }
                                                )
                                            }
                                        }
										ShowString(text)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
All commented part is previous part of dev2
m

matvei

01/03/2020, 12:47 PM
I'm not sure I can clearly understand what's going on in this code. 1. It has mix of modifiers and FlexColumn/FlexRow. I don't believe this mix in one Column will work very well. 2. and inside FlexColumn and FlexRow you use
expanded {}
DSL with, IIUC, intention to expand to the whole screen, but this won't work, there's a modifier ExpandedHeight/ExpandedWidth for it. My recommendation will be to use one appraoch and move away from FlexColumn/FlexRow complitely, as well as Padding composables and try again.
a

amar_1995

01/03/2020, 12:49 PM
Okay, I will give it a try. Thanks
👍 1
Yes, It worked after removing FlexRow/FlexColumn Code also looks clear now Thanks
m

matvei

01/03/2020, 2:27 PM
No problem 🙂
c

codeslubber

01/03/2020, 3:47 PM
@amar_1995 can you post the revised code?? I had some dev02 axis modifier crap that did not work in 03 as well..
a

amar_1995

01/03/2020, 3:52 PM
Copy code
var open by +state { false }
Padding(10.dp) {
	Clickable({
		open = !open
	}) {
		Column(
			modifier = ExpandedHeight
		) {
			Row{
				Column(modifier = Flexible(1f)) {
					Text(...)
					if(!open)
					Text(...)
				}
				WidthSpacer(width = 10.dp)
				Container(
					width = 20.dp,
					height = 20.dp,
					alignment = Alignment.BottomCenter
				) {
					DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)

				}
			}
			if(open) {
				Padding(padding = 10.dp) {
					var value by +state { "Text" }
					Column() {
						Row() {
							Column(Flexible(1f)) {}
							Button(
								text = "...",
								style = OutlinedButtonStyle(
									shape = RoundedCornerShape(5.dp),
									contentColor = (+MaterialTheme.colors()).primary,
									border = Border(
										color = Color.Black,
										width = 1.dp
									)
								),
								onClick = {...}
							)
						}
						ShowString(value)
					}
				}
			}
		}
	}
}
👍🏻 1
c

codeslubber

01/03/2020, 4:09 PM
nice and clean…
m

matvei

01/03/2020, 5:06 PM
Not sure if it's sarcasm or not 🙂 But this is one of the reasons why modifiers were introduced. To remove this DSL for FlexColumn/Stack, which felt wrong and was adding a lot of unnecessary nesting. So I'm glad if you find it better than before 🙂
c

codeslubber

01/03/2020, 5:09 PM
No it does look nice, I love Compose..
d

Dmitri Sh

01/03/2020, 8:03 PM
@matvei are you suggesting FlexColumn is to be avoided in general?
m

matvei

01/06/2020, 11:42 AM
Yep, it will be deprecated in dev04. Use Column/Row and apply
Flexible
modifier to children you want to make flexible
d

Dmitri Sh

01/06/2020, 6:31 PM
bummer 🙂 just used Flex to build a sample project and based on that advised others to use it - back to the drawing board and retracting the advice 😰
m

matvei

01/06/2020, 6:40 PM
Haha, sorry 🙂 Anyway, the concept of Flex stays, it's just API changes slightly, so it should be an easy migration
d

Dmitri Sh

01/06/2020, 7:03 PM
no worries, it comes with the territory - working with alpha apis 🙂
2 Views