0

I had an earlier question that I got awesome help to but there's something not quite right with the layout still. Figured I'd create a new question rather than continue that one.

I'm making a custom picker using a button and want it laid out like the other pickers, textfields, etc on my form. In the previous question I learned to use the alignmentGuide. However that isn't working as the field isn't quite lined up with the others AND I can only make the window a bit smaller and then it locks into place. I want it to line up with above and be dynamic to window size adjustments when running.

Here's what it looks like right now enter image description here

This is as small as I can make it: enter image description here

And here's the current code:

import SwiftUI

struct ContentView: View {

@State var myName:String = "Kyra"
@State var selectedPickerItem: String?
var pickerItems = ["item 1",
                   "item 2",
                   "item 3",
                   "item 4",
                   "item 5",
                   "item 6"]
@State var showingPopover:Bool = false
@State var selectedItems = [String]()
@State var allItems:[String] = ["more items",
                     "another item",
                     "and more",
                     "still more",
                     "yet still more",
                     "and the final item"]
@State private var commonSize = CGSize()
@State private var commonTextSize = CGSize()

var body: some View {
    Form {
        
        TextField("My Name:", text: $myName, prompt: Text("What's your name?"))
            .foregroundColor(.white)
            .background(Color(red: 0.4192, green: 0.2358, blue: 0.3450))
        
        Picker(selection: $selectedPickerItem, label: Text("Pick Something:")) {
            Text("No Chosen Item").tag(nil as String?)
            ForEach(pickerItems, id: \.self) { item in
                Text(item).tag(item as String?)
            }
        }
        .foregroundColor(.white)
        .background(Color(red: 0.2645, green: 0.3347, blue: 0.4008))
        
        
        HStack() {
            Text("Select Items:")
                .foregroundColor(.white)
                .readSize { textSize in
                    commonTextSize = textSize
                }
            Button(action: {
                showingPopover.toggle()
            }) {
                HStack {
                    Spacer()
                    Image(systemName: "\($selectedItems.count).circle")
                        .foregroundColor(.secondary)
                        .font(.title2)
                    Image(systemName: "chevron.right")
                        .foregroundColor(.secondary)
                        .font(.caption)
                }
            }
            .readSize { textSize in
                commonSize = textSize
            }
            .popover(isPresented: $showingPopover) {
                EmptyView()
            }
        }
        .alignmentGuide(.leading, computeValue: { d in (d.width - commonSize.width) })
        .background(Color(red: 0.4192, green: 0.2358, blue: 0.3450))
    }
    .padding()
}
}

// FROM https://stackoverflow.com/questions/57577462/get-width-of-a-view-using-in-swiftui
extension View {
  func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
background(
  GeometryReader { geometryProxy in
    Color.clear
      .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
  }
)
.onPreferenceChange(SizePreferenceKey.self, perform: onChange)
  }
}

private struct SizePreferenceKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}
Kyra
  • 4,971
  • 5
  • 33
  • 54
  • I was looking into this for your last question, and it gets tricky ... I didn't find a way to get the width of the other input elements (without label) in a flexible layout. Can't you just define a fixed width for all of them? (Pickers and Buttons becoming too wide looks funny anyway :) – ChrisR Feb 03 '22 at 23:54
  • That might end up being what I do. I just wasn't sure if the user would want to make the window smaller or larger. Thank you. I'll leave this up just in case. – Kyra Feb 03 '22 at 23:59

0 Answers0