The new Grid View looks like it brings us a simple way to get row-column layouts into our SwiftUI apps!
I wonder if someone can help me with one aspect: I have a situation similar to the one described for the Pet Leaderboard App in the "Compose custom layouts with SwiftUI" video. But I want to save space by putting the Cat/Goldfish/Dog voting buttons in the leaderboard table itself, in the first column, instead of the labels. Here's the code for a simplified version of that table:
import SwiftUI
struct TableDemo: View {
var body: some View {
Grid(alignment: .leading) {
GridRow {
Button {
// vote for Cat
} label: {
Text("Cat").fontWeight(.bold).foregroundColor(.white).padding().background(.green).cornerRadius(8)
}
Text("23").fontWeight(.bold).foregroundColor(.white).gridColumnAlignment(.trailing)
}
GridRow {
Button {
// vote for Goldfish
} label: {
Text("Goldfish").fontWeight(.bold).foregroundColor(.white).padding().background(.green).cornerRadius(8)
}
Text("3").fontWeight(.bold).foregroundColor(.white)
}
}
.padding(20)
.background(Color(red: 50.0/255, green: 85.0/255, blue: 125.0/255))
.cornerRadius(16)
}
}
struct TableDemo_Previews: PreviewProvider {
static var previews: some View {
TableDemo()
}
}
which looks like this:
That result is visually unappealing because the buttons are inconsistent. It's nice that the Grid column is as wide as the widest button - that part is a big win from using the Grid View! But I'd like to get them to conform to the width of the widest button.
The normal solution for some situations is to set an infinite maxWidth to the buttons. eg:
Text("Cat").fontWeight(.bold).frame(maxWidth: .infinity).foregroundColor(.white).padding().background(.green).cornerRadius(8)
But that results in the entire column expanding to take all available space:
So what can we do, other than resorting to a PreferenceKey based approach, to solve this? Is there an official Grid-centric way of fixing this?
This is the desired layout (I manually sized the buttons):
CuriousJorge
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
Creating a new Swift Playground in the Playgrounds App on iPad or macOS, I get an empty Playground, and a UserModule with a SharedCode.swift file in it. In SharedCode.swift there’s just a comment that says:
// Code inside modules can be shared between pages and other source files.
I added a simple function to it:
func hello() {
print ("hello")
}
Then I tried calling hello() from the main playground. I get the error “Cannot find ‘hello’ in scope.”
I can see, from auto-completion, that UserModule is a known entity in the main playground’s scope. But I don’t know how to set things up so that I can access my hello function, and I can’t find anything helpful in the docs. Could someone point me in the right direction, please?
Hi, I'm starting to learn swiftUI and, somewhere in the last few weeks, I remember watching an old video (I think from WWDC) the described the algorithm that swiftUI uses for laying out views.
Now I'd like to review that information, but search as I might, I can't find it again. Does anyone know what that video that might be, or better yet, please suggest a superior resource. I'm struggling to control how siblings in an HStack get stretched (FWIW a TextField next to a Stepper), and need more insight into the algorithm.
Thanks!