In SwiftUI, I'm using the default Picker like this:
Picker("Choose option", selection: $selectedRateID) {
ForEach(model.rates, id: \.id) {
Text($0.title).tag($0.id)
}
}
The picker renders to this:
When I try to select an option, the detail screen looks like this:
Is there a way to make the picker options detail screen use the InsetGroupedListStyle like this:
I tried adding .listStyle(InsetGroupedListStyle()) to the ForEach, Picker, and other nodes, but it did not work. Any idea on how to achieve this? (And why is there so much space above it with no title?)
Related
Hello friends of swift coding,
I try to create a contextMenu on TextEditor and TextField in SwiftUI for my macOS app.
TextEditor(text: $information)
.contextMenu{
Button {
print("gogogo")
} label: {
Text("Just do it!")
}
}
Code above is not working. What I try to achieve: in a TextEditor I like to right-click and either make changes to selected text or paste some textclippings to a certain position.
But the contextMenu inside an editor seems to be different to the contextMenu of other UI-Views.
How is it done, then? Or can I use the above code and have to put it somewhere else or give it a code word?
I'm having problems related to .searchable and am wondering if it's related to my application's view hierarchy. The examples I can find for using Searchable say to use it on the NavigationView directly, and show it like so:
var body: some View {
NavigationView {
List {
...some list content here...
}
.navigationTitle("My List")
}
.searchable(text: $queryString)
}
My NavigationView is a couple of views up from the list where I want to use .searchable. My hierarchy:
HomeView (has the NavigationView) -> LocationsView -> LocationListView
I want to use .searchable in the LocationListView, and I can - but it's not optimal. The Search bar is always visible, and it causes the navigation bar in my LocationDetailView (the next view down the hierarchy) to "jump" down when the view loads, and crowd the rest of my view, with a gap at the top.
Link to image w/nav title gap
I theorize that this is because I'm using .searchable in the LocationListView, which is inside the NavigationView. If I comment out .searchable in the List view, the Detail view does not have this behavior.
I'm wondering if there is a good recommendation for how to deal with this. I know I can't use a second NavigationView in the ListView, because then it's nested inside the first navigation view and has all of the associated issues. (Although it does fix the .searchable implementation!) Is there another way to solve this?
When using a Form on a view and presenting it with either .sheet or .fullScreenCover the view is never presented and instead memory is quickly gobbled until the app crashes. Removing the form and replacing it with anything else works just fine.
Inside top level view, the sheet or full screen uses:
.fullScreenCover(isPresented: $showProfile, content: {
NavigationView {
ProfileNumberView()
}
})
OR
.sheet(isPresented: $showProfile, content: {
NavigationView {
ProfileNumberView()
}
})
The view it's launching can be as simple as:
var body: some View {
Form {
Text("TEST")
}
}
Again doing this causes the app to simply gobble up memory until a crash and no view is presented. If I simply remove the Form tag, the the view will present as normal. I have also tried embedding the NavigationView inside the form view (above the Form tag) but to no avail.
Why can I not present a view using a Form in this manner?
Update: I have discovered the source of the issue is when the top level view contains a List. If there is no list the screens present just fine, but it seems we cannot present a form within a cover or sheet if the parent has a list in it. Still not clear why that would be the case but commenting out the list and the sheet or fullscreencover worked.
The turned out to be something that was not directly related to the code I posted above. It's worth posting the answer though as I am sure others may run into this. The problem was styling given to the list in order to paint a background with an image. Specifically:
UITableViewCell.appearance().backgroundColor = .clear
let imageView = UIImageView(image: UIImage(named: "gradientBackground"))
imageView.contentMode = .scaleToFill
UITableView.appearance().backgroundView = imageView
This styling of the list for some reason prevents you from presenting a sheet or full screen cover that has a form. Very unclear why and I need this background, so while this particular issue is resolved, the functionality required is not.
I have a textField in a SwiftUI file and want this fiel duo become the first responder and the keyboard should show up. In Swift I would simply do: textField.becomesFirstResponder().
Does anyone Has an idea how to do that in SwiftUI?
for a simpler solution, instead of writing a custom textfield you can use this library, https://github.com/siteline/SwiftUI-Introspect:
TextField("placeholder", text: $someText).introspectTextField { textField in textField.becomeFirstResponder() }
I'm trying to make navigation view that leads to destination view with scroll view, where navigation title of destination view would animate towards inline display mode or at least scroll behind the nav bar itself.
Basically I'm trying to replicate behavior of standard Music app, specifically when you go from Library to Songs.
There you have source view (Library) with its own title that is animated into inline display mode on scroll. When you tap Songs you also get list with new title (Songs) that also animates into inline display mode on scroll.
So I have main NavigationView with NavigationBarTitle. I move to destinationView with its own NavigationBarTitle and some long list of content. On scroll, NavigationBarTitle of main Navigation view changes to inline display mode, but NavigationBar of destination view behaves very odd: it's basically an overlay with no background and no animation.
And if you remove NavigationBarTitle of destination view all together it only makes things worse. It seems like it adds another transparent NavigationBar with nothing in it.
Also tried to add background to the navigation bar, looked around documentation, but found no solution.
Not sure if I'm doing something very wrong or it's just beta bug of SwiftUI or Xcode.
import UIKit
struct ContentView: View {
var body: some View {
NavigationView{
List(0..<20) { item in
NavigationLink(destination: DetailedView()) {
Text("Next view")
}
}
.navigationBarTitle("Source View")
}
}
}
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.navigationBarTitle(Text("Destination View"))
// comment out line above to see empty frame of navigation bar
}
}
This is not a full answer to your question, but a temporary workaround: add top or vertical padding to your list on the child view, depending on your preference. This is what I have been doing until there is a better solution.
This will at least make the content scroll under the navigation header with a proper background rendered behind the header. It doesn't have the nice animation to make the title smaller.
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.padding(.top)
.navigationBarTitle(Text("Destination View"))
}
}
This is fixed in the iOS 13.1 public release (with the App Store release of Xcode 11).
I'm currently on beta 5, and I think this is an ongoing bug with SwiftUI.
I noticed the same issue while doing the SwiftUI Landmarks Tutorials, and you can easily reproduce the issue: https://imgur.com/a/aYgUUH0
For now, to avoid seeing all the content scroll under a transparent navBar, I've converted all of my Navbars to display as inline, since automatic and large experience the issue.
List {
// ...
}
.navigationBarTitle(Text("MyTitle"), displayMode: .inline)