Section Inhalt zentrieren

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Section Inhalt zentrieren

    Hallo,

    ich habe eine View mit mehreren Sections. Den Inhalt einer dieser Sections möchte ich gerne zentriert haben.

    Es geht dabei um die Section mit dem Button "Add Picture" und dem Rating (die Katzenpfoten)

    Quellcode

    1. NavigationView
    2. {
    3. Form
    4. {
    5. Section
    6. {
    7. TextField("Name of the Creature", text: $name)
    8. TextField("Local Name of the Creature", text: $nameCN)
    10. Picker("Country", selection: $country)
    11. {
    12. ForEach(countries, id: \.self)
    13. {
    14. Text($0)
    15. }
    16. }
    17. .pickerStyle(WheelPickerStyle())
    18. }
    20. Section // um diese Section geht es
    21. {
    22. VStack // alignment Angaben können hinzugefügt werden bewegen sich aber nicht über die ganze Breit
    23. {
    24. Button("Add Picture")
    25. {
    26. //action
    27. }
    28. .padding()
    29. RatingView(rating: $rating)
    30. }
    31. }
    33. Section
    34. {
    35. TextEditor(text: $information)
    36. .padding()
    37. } header: {
    38. Text("Write down Creature information")
    39. }
    41. Section
    42. {
    43. Button("Save")
    44. {
    45. let newCreature = Kreatur(context: moc)
    46. newCreature.id = UUID()
    47. newCreature.name = name
    48. newCreature.nameCN = nameCN
    49. newCreature.country = country
    50. newCreature.information = information
    51. newCreature.rating = Int16(rating)
    52. //picture ...
    54. try? moc.save()
    55. dismiss()
    56. }
    57. }
    58. }
    59. .navigationTitle("Add Creature")
    60. }
    61. }
    Alles anzeigen

  • Hey,

    wie du ja schreibst, geht im Quellcode um die Passage zwischen Line 20 und 31. Deine Idee, ein Center-Alignment zum VStack hinzuzufügen, ist grundsätzlich schon einmal korrekt! Der Grund, weshalb das allerdings nicht ausreicht, ist der folgende: Der VStack "dehnt" sich, im Gegensatz zu z.B. Color oder Spacer() nicht auf die verfügbare Fläche aus, sondern wächst nur mit dem dem Content mit. Und da dein Button nicht die volle Breite ausfüllt, bleibt eben auch der zentrierte Stack links kleben.

    Es gibt zwei Lösungsideen, würde ich sagen. Entweder du "zwingst" den Button, auf die volle Breite zu wachsen, z.B.. mit einem .frame(width: .infinity, alignment: .center) modifier. Oder du benutzt Spacer und einen horizontalen Stack. Ich denke letzteres ist die üblichere Form. Das würde dann so aussehen (Code nicht getestet):

    Quellcode

    1. Section {
    2. VStack {
    3. HStack {
    4. Spacer()
    5. Button("Add Picture") { // Action }
    6. .padding()
    7. Spacer()
    8. }
    9. RatingView(rating: $rating)
    10. }
    11. }
    Alles anzeigen
    Viele Grüße

  • Kurze Anmerkung zu der ansonsten korrekten Antwort:

    Osxer schrieb:


    Es gibt zwei Lösungsideen, würde ich sagen. Entweder du "zwingst" den Button, auf die volle Breite zu wachsen, z.B.. mit einem .frame(width: .infinity, alignment: .center) modifier.

    Es müsste soweit ich weiß maxWidth statt width sein:

    Quellcode

    1. .frame(maxWidth: .infinity, alignment: .center)
    Ich bevorzuge hier aber auch die Lösung mit Spacer().
    So Long, and Thanks for All the Fish.