Skip to content

Commit

Permalink
[iOS] Adding example to EmojiSearch sample app to help illustrate issue
Browse files Browse the repository at this point in the history
  • Loading branch information
dnagler committed Aug 23, 2023
1 parent b949850 commit 3396a7e
Showing 1 changed file with 50 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ interface Navigator {
}

enum class Variant {
LAZY_COLUMN, SCROLLABLE_FLEXBOX
LAZY_COLUMN, SCROLLABLE_FLEXBOX, BUGGY_COLUMNS
}

@Composable
Expand All @@ -75,6 +75,7 @@ fun EmojiSearch(
when (variant) {
Variant.LAZY_COLUMN -> LazyColumn(httpClient, navigator)
Variant.SCROLLABLE_FLEXBOX -> NestedFlexBoxContainers(httpClient, navigator)
Variant.BUGGY_COLUMNS -> BuggyNestedColumns(httpClient, navigator)
}
}

Expand Down Expand Up @@ -267,6 +268,54 @@ private fun NestedFlexBoxContainers(httpClient: HttpClient, navigator: Navigator
}
}

@Composable
private fun BuggyNestedColumns(httpClient: HttpClient, navigator: Navigator) {
// Full-screen parent column
Column(
width = Constraint.Fill,
height = Constraint.Fill,
horizontalAlignment = CrossAxisAlignment.Center,
) {
// Header
Column(
width = Constraint.Fill,
horizontalAlignment = CrossAxisAlignment.Center,
) {
Item(
emojiImage = loadingEmojiImage,
onClick = {},
)
Item(
emojiImage = loadingEmojiImage,
onClick = {},
)
Item(
emojiImage = loadingEmojiImage,
onClick = {},
)
Item(
emojiImage = loadingEmojiImage,
onClick = {},
)
}
// Body (sibling of Header)
// Given a height with a Fill constraint, and a Center alignment,
// the Item should be vertically cenetered in the remaining space, but isn't.
// Instead, the content is effectively pushed down by the height of the Header.
Column(
horizontalAlignment = CrossAxisAlignment.Center,
width = Constraint.Fill,
height = Constraint.Fill,
verticalAlignment = MainAxisAlignment.Center,
) {
Item(
emojiImage = loadingEmojiImage,
onClick = {},
)
}
}
}

@Composable
private fun Item(
emojiImage: EmojiImage,
Expand Down

0 comments on commit 3396a7e

Please sign in to comment.