Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draft: Precise spacing #14

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

MojtabaHs
Copy link
Contributor

@MojtabaHs MojtabaHs commented Sep 5, 2024

The original code used padding to simulate spacing, which caused 3 main issues:

  1. Unintended padding around the collection.
  2. Spacing being twice the intended length. (e.g. passing 4 but seeing 8)
  3. The last Item sometimes does not fit into the layout although it there is enough available space.
    You can notice all of these issues in the following example image

Before this PR (With spacing of 4)

Screenshot 2024-09-05 at 3 04 27 PM

After this PR (With spacing of 8)

This PR addresses the problem by applying the correct spacing, ensuring that the spacing is separate from the padding:
Screenshot 2024-09-05 at 3 00 40 PM

Additionally, I updated the default spacing from 4 to 8 to better align with the original design intent.

@MojtabaHs
Copy link
Contributor Author

MojtabaHs commented Sep 5, 2024

Here is another example of before and after this PR with some un-even elements:

Before: With spacing of 4
Screenshot 2024-09-05 at 3 25 18 PM
After: With spacing of 8
Screenshot 2024-09-05 at 3 25 40 PM

@gordan-glavas-codecons
Copy link
Collaborator

Hey, maybe I'm missing something, but allow for setting the padding around the entire FlowLayout view, i.e the right-hand margin seems to be ignored and always ends up smaller than the left-hand one:

No padding:
Simulator Screenshot - iPhone 15 - 2024-09-30 at 13 02 36

Padding (either .padding(), .padding(10), .padding(.horizontal, 10)):
Simulator Screenshot - iPhone 15 - 2024-09-30 at 13 02 55

FlowLayout(mode: .vstack,
                   items: items) {
          Text($0)
            .font(.system(size: 12))
            .foregroundColor(.black)
            .padding()
            .background(RoundedRectangle(cornerRadius: 4)
              .border(Color.gray)
              .foregroundColor(Color.gray))
        }.padding()

@MojtabaHs
Copy link
Contributor Author

Hey, maybe I'm missing something, but allow for setting the padding around the entire FlowLayout view, ...

It seems like the ZStack content does not respect the container size. I will take a look later

@MojtabaHs MojtabaHs changed the title Precise spacing draft: Precise spacing Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants