.fileImporter
is not working inside .toolbar or TabView
In my case I can't send binding to parent.
Ex:
.toolbar {
AttachedMediaView(files: $uploadedFiles, uploadedFiles: $uploadedMedia) {
Image(systemName: App.SystemImage.add)
}
}
Related
I have a very simple NavigationStack that I would like to customise the title, but I can't seem to find the right modifiers to achieve this.
NavigationStack {
List {
NavigationLink {
Text("My Child View")
} label: {
Label("Child View")
}
}.navigationTitle("Parent View")
}
I would like to change how the font looks for the .navigationTitle and be able to add a button to the right. When I add a .font modifier to .navigationTitle it adds it to the list items, not the title. And .navigationTitle only appears to accept a string.
I am looking to achieve the below (my button will be a + rather than a chevron).
From what I can tell, I can't use navigationTitle to achieve this. However, if I don't use that, then the back button has the wrong title (it uses the text Back instead of Parent View).
You can achieve both using the .toolbar modifier:
public var body: some View {
NavigationStack {
List {
NavigationLink {
Text("My Child View")
} label: {
Label("Child View", systemImage: "questionmark")
}
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Text("Parent View")
.font(.system(size: 22, weight: .bold))
}
ToolbarItem(placement: .navigationBarTrailing) {
Button {
} label: {
Image(systemName: "plus")
}
}
}
}
}
ScrollView {
ZStack{
NavigationView(){
List {...}
.toolbar {...} }
.sheet(isPresented: $showingProfile) {...}
.sheet(isPresented: $showingVoortgang) {...}
}
}
}
.background(Image("Background3")
.resizable()
.ignoresSafeArea()
.opacity(1))
// I have a NavigationView in a Stack in a ScrollView. I made the background of the scrollView my picture but it wouldn't render the whole page, only the background of the back page and not the NavigationView
If I understand correctly, your issue is that content inside NavigationView does not have the background image you applied to scroll view.
One way to do this is to use blendMode() on NavigationView, try it with .darken, .overlay, .plusDarker or other modes to see which one you like better.
Example in your code:
ScrollView {
ZStack{
NavigationView(){
List {...}
.toolbar {...} }
.sheet(isPresented: $showingProfile) {...}
.sheet(isPresented: $showingVoortgang) {...}
}
.blendMode(.plusDarker) // <--
}
}
.background(Image("Background3")
.resizable()
.ignoresSafeArea()
.opacity(1))
Try this:
ScrollView {
ZStack{
NavigationView(){
List {...}
.toolbar {...} }
.sheet(isPresented: $showingProfile) {...}
.sheet(isPresented: $showingVoortgang) {...}
}
}
.background(Image("Background3")
.resizable()
.edgesIgnoringSafeArea(.all)
}
I have a problem. I have empty space on the top of my views, and I think that the problem is the Navigation View. View Image
I figured it out to make it work and hide that empty space with this line of code, but if I'm using this approach, my toolbar items dissapears too, and I do not want this.
.navigationBarHidden(true)
I'll share my code below. Thanks !
TabView{
NavigationView{
VStack {
MeniuriView()
NavigationLink(isActive: $optionsActive) {
WaitingOrderView()
.environmentObject(syncViewModel)
} label: {
EmptyView()
}
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolbarButtons(numberOfProducts: menus.count) {
optionsActive = true
}
}
ToolbarItem(placement: .navigationBarLeading) {
Text(Texts.mainViewText1)
.font(.system(size: 24))
.fontWeight(.bold)
.padding()
}
}
}
.tabItem {
Text(Texts.mainViewText2)
Image(systemName: "fork.knife")
}
}
struct MeniuriView: View {
#EnvironmentObject var syncViewModel : SyncViewModel
var body: some View {
List {
ForEach(syncViewModel.menuType) { type in
SectionView(menuType: type)
}
}
.listStyle(PlainListStyle())
}
}
The space is reserved for the (large) NavigationTitle. You can use
.navigationBarTitleDisplayMode(.inline)
on the NavigationView to make it small. And if its empty, it won't show.
I'd like to achieve something similar in SwiftUI to what is described in Apple's Human Interface Guidelines about toolbars.
I tried using .toolbar { } but items are too small and NavigationLink doesn't change the selected View. I tried setting ExpandedWindowToolbarStyle() on WindowGroup.
Code:
NavigationView { }
.toolbar {
ToolbarItem(placement: ToolbarItemPlacement.automatic) {
HStack {
Text("")
NavigationLink(
destination: getDestination(forOption: Option.home)) {
VStack {
Image(systemName: Option.home.iconName)
Text("test")
}
.frame(height: 50)
}
}
}
}
current state:
You can use a customizable toolbar and labels.
.toolbar(id: "Main") {
ToolbarItem(id: "Sidebar") {
Button(action: {}) {
Label("Sidebar", systemImage: "sidebar.right")
}
}
}
Also it might be possible to use TitleAndIconLabelStyle with MacOS 11.3. I haven't tried it yet.
I'm trying to create something like this:
A navigation bar with 3 items, is it possible to do this using navigationBarItems?
My current plan is to hide the navbar using:
.navigationBarTitle("")
.navigationBarHidden(true)
and then creating the 3 buttons using a HStack. The Problem I have is because I'm hiding the navbar, the click of one of the buttons take it to another view, which also then hides the navbar (Thats not what im looking for)
I have tried:
.navigationBarItems(trailing:
HStack {
Button("About") {
print("About tapped!")
}
Button("Help") {
print("Help tapped!")
}
}
)
But this creates the two items next to each other on the right side. I tried putting a Spacer() in the above HStack, but this doesn't work.
I would prefer to use navigationBarItems but can't seem to find a way to centre an item?
A navigation bar with 3 items, is it possible to do this using navigationBarItems?
No. Moreover navigationBarItems modifier is deprecated since SwiftUI 2.0
SwiftUI 2.0
This can be done with toolbar modifier as easy as attach it to any view inside NavigationView
Demo prepared & tested with Xcode 12 / iOS 14:
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button(action: {}) { Image(systemName: "gear") }
}
ToolbarItem(placement: .principal) {
Button(action: {}) { Image(systemName: "car") }
}
ToolbarItem(placement: .navigation) {
Button(action: {}) { Image(systemName: "chevron.left") }
}