UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Xcode 12 and SwiftUI Forms

Forums > SwiftUI

How can you get the width of a Form within a view? I want to display 10 Text boxes across the width of the Form and I want them to go edge to edge with no space in between. I am using a Form b/c I also will have a Picker and I want the navigation view type behavior.

I can get the width of the screen with UIScreen.main.bounds.width but that is the full width of the screen, and the Form is a subset of that. Here is some sample code showing the issue. Any suggestions much appreciated.

I'm using XCode 12

Thanks...

MODIFIED WITH SOLUTION

import SwiftUI

struct ContentView: View {
    @State var names: [String] = [
        "Thing 1",
        "Thing 2",
        "Thing 3",
        "Thing 4",
        "Thing 5",
    ]

    @State var pickedIntex: Int = 0
    @State var selectedDate = Date()

    @State var buttonWidth: CGFloat = UIScreen.main.bounds.width / 9

    var body: some View {
        NavigationView {
            VStack {
                Form {
                    Picker(selection: $pickedIntex, label: Text("Pick a Name")) {
                        ForEach(0 ..< names.count) {
                            Text(names[$0])
                        }.scaledToFit()
                    }
                    .navigationBarTitle("Nav Bar Title", displayMode: .inline)

                    DatePicker(selection: self.$selectedDate,
                               displayedComponents: [.date],
                               label: {
                                   Text("Date Picker")
                               })

                    // ----- SOLUTION STARTS HERE -----
                    GeometryReader { geo in
                        HStack(spacing: 0) {
                            ForEach(0 ..< 7) {
                                Text("\($0)")
                                    .frame(width: geo.size.width / 7, height: geo.size.width / 7, alignment: .center)
                                    .background(Color(UIColor.lightGray))
                                    .border(Color.white)
                            }
                        }
                    }
                    // ----- SOLUTION ENDS HERE -----

                    NavigationLink(destination: PageTwoView()) {
                        Text("Link One")
                            .font(.headline)
                            .foregroundColor(.blue)
                        Image(systemName: "plus")
                    }

                    NavigationLink(destination: PageTwoView()) {
                        Text("Link Two")
                            .font(.headline)
                            .foregroundColor(.blue)
                        Image(systemName: "plus")
                    }
                }
                .navigationBarTitle("Setup Info", displayMode: .inline)
                Spacer()
            }
        }
    }
}

2      

Getting the dimensions of things on screen is exactly what GeometryReader is for. Check it out.

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.