I have a navigation title for a list view. After navigating back and forth, my navigation title is missing. I am new to swiftui and unable to debug. Kindly help.
var body: some View {
NavigationView {
VStack {
TabView(selection: $choice,
content: {
OPListCell()
IPListCell()
})
.tabViewStyle(PageTabViewStyle())
}
.listStyle(PlainListStyle())
.navigationBarTitle("My Patients")
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Picker(selection: self.$choice, label: Text("")) {
ForEach(0 ..< self.choices.count) {
Text(self.choices[$0])
}
}
.frame(width: 175)
.pickerStyle(SegmentedPickerStyle())
.padding(.leading, 10)
}
}
}
}
}
}
Related
I am trying to put an option for .onlongpressgesture for this list of groups. However, it doesn't seem to work and I figure, it will work on Button.
I have tried to apply ".onTapGesture" and ".onLongPressGesture", but there is no effect.
Is there a way I can transform the Code below from a NavigationLink to a Button with the same destination when tapped and an additional Menu (called "OptionsmenuView") when long pressed?
The NavigationLink:
VStack (spacing: 20){
ForEach(groups, id:\.self) { Group in
NavigationLink(destination: GroupView()) {
ZStack (alignment: .bottomLeading) {
Image(uiImage: (UIImage(data: Group.groupThumbnail ?? self.image) ?? UIImage(named: "defaultGroupThumbnail"))!)
.resizable(capInsets: EdgeInsets())
.aspectRatio(contentMode: .fill)
.frame(height: 200.0, alignment: .center)
.cornerRadius(22)
VStack (alignment: .leading) {
Text("\(Group.groupTitle ?? "Untitled")")
.font(.title)
.fontWeight(.heavy)
.multilineTextAlignment(.leading)
Text("Consists of 5 Flowers")
}
.padding([.leading, .bottom], 18.0)
.foregroundColor(.primary)
}
.listRowBackground(Color.black)
}
}
}
The OptionMenuView:
struct OptionsMenuView: View {
var body: some View {
Menu {
Button("Cancel", role: .destructive) {
// Do something
}
Button {
// Do something
} label: {
Label("Edit", systemImage: "square.and.pencil")
}
Button {
// Do something
} label: {
Label("Delete", systemImage: "trash")
}
} label: {
Label("Settings", systemImage: "gearshape.fill")
}
}
}
I appreciate any form of advice. Thanks in advance.
Couldn't you just use .contextMenu ?
NavigationView {
List (0..<10) { i in
NavigationLink {
Text("DestionationView")
} label: {
Text("Item \(i)")
}
.contextMenu { // << here
Button("Cancel", role: .destructive) {
// Do something
}
Button {
// Do something
} label: {
Label("Edit", systemImage: "square.and.pencil")
}
Button {
// Do something
} label: {
Label("Delete", systemImage: "trash")
}
}
}
}
I'm trying to figure out why the navigation title is not working with some devices, but I'm not able to figure out this issue. Can any one please help me to find out this issue, why the navigation title shows only the first 3 letters and after showing?
I have attached the Screenshot also please check.
iPhone 11 Device
iPhone 11 Simulator
Code:-
var body: some View {
ZStack {
Color.init(ColorConstantsName.MainThemeBgColour)
.ignoresSafeArea()
GeometryReader { geo in
ScrollView(.vertical) {
Text("Testing")
}
}
}
.navigationBarBackButtonHidden(true)
.navigationTitle(CommonAllString.BlankStr)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading:AnyView(leadingButton),trailing:AnyView(self.trailingButton))
.foregroundColor(Color.white)
}
var trailingButton: some View {
HStack {
Image(systemName: ImageConstantsNameForChatScreen.PersonImg)
.padding(.trailing)
Image(ImageConstantsName.DTRShareIconImg)
.resizable().frame(width: 20, height: 20)
}
}
Below Code Working:-
struct PSScreen: View {
var body: some View {
ZStack {
Color.init("Colour")
.ignoresSafeArea()
VStack{
Text("PSScreen")
}
}
.navigationBarBackButtonHidden(true)
.navigationBarTitle("", displayMode: .inline)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
leadingButton.frame(width: 50, alignment: .leading)
}
ToolbarItem(placement: .navigationBarTrailing) {
trailingButton
}
}.foregroundColor(Color.white)
}
var leadingButton: some View {
HStack{
Text("Profile")
}
}
var trailingButton: some View {
HStack {
Image(systemName: "Person")
.padding(.trailing)
Image("Share")
.resizable().frame(width: 20, height: 20)
}
}
}
This question already has answers here:
How to put a logo in NavigationView in SwiftUI?
(8 answers)
Having Tab bar and Navigationbar in the same View in SwiftUI?
(2 answers)
Closed 1 year ago.
I want to use a logo image in the navigation bar's title, instead of plain text. Here some solution for UIKit, but I want to use for SwiftUI also. Any idea will be appreciated.
Screenshot:
ContentView:
struct ContentView: View {
#State private var isShowing = false
var body: some View {
ZStack {
if isShowing {
SideMenuView(isShowing: $isShowing)
}
TabView {
NavigationView {
HomeView()
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
.tabItem {
Image(systemName: "1.circle")
Text("Page 1")
}
NavigationView {
HomeTwoView()
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
.tabItem {
Image(systemName: "2.circle")
Text("Page 2")
}
}
.edgesIgnoringSafeArea(.bottom)
//.cornerRadius(isShowing ? 20 : 0) //<< disabled due to strange effect
.offset(x: isShowing ? 300 : 0, y: isShowing ? 44: 0)
.scaleEffect(isShowing ? 0.8 : 1)
}.onAppear {
isShowing=false
}
}
}
Solution is here. You can add .toolbar {ToolbarItem(placement: .principal) {Image(systemName: "star.fill")} } inside of the NavigationView.
NavigationView {
HomeView()
.toolbar {
ToolbarItem(placement: .principal) {
Image(systemName: "star.fill")
}
}
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
Screenshot:
I have tried to use Buttons and Navigation Links from various examples when researched on this channel and on the net. The NavigationLink would be ok, except that the NavigationView is pushing everything down in my view.
I have a view that contains an image and a text like this: ( x Close) but when I use the code below, the Close button is not doing anything.
In ContentView() I have a (?) button that takes me from WalkthroughView(), then to the PageTabView, then to this view, TabDetailsView:
ContentView():
ZStack {
NavigationView {
VStack {
Text("Hello World")
.padding()
.font(.title)
.background(Color.red)
.foregroundColor(.white)
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
withAnimation {
showOnBoarding = true
}
} label: {
Image(systemName: "questionmark.circle.fill")
}
}
}
}
.accentColor(.red)
.disabled(showOnBoarding)
.blur(radius: showOnBoarding ? 3.0 : 0)
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
}
}
.onAppear {
if !isWalkthroughViewShowing {
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
withAnimation {
showOnBoarding.toggle()
isWalkthroughViewShowing = true
}
}
}
}
WalkthroughView():
var body: some View {
ZStack {
GradientView()
VStack {
PageTabView(selection: $selection)
// shows Previous/Next buttons only
ButtonsView(selection: $selection)
}
}
.transition(.move(edge: .bottom))
}
PageTabView():
var body: some View {
TabView(selection: $selection) {
ForEach(tabs.indices, id: \.self) { index in
TabDetailsView(index: index)
}
}
.tabViewStyle(PageTabViewStyle())
}
below, is the TabDetailsView():
At the top of the view is this Close button, when pressed, should send me back to ContentView, but nothing is happening.
struct TabDetailsView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
let index: Int
then, inside the body:
VStack(alignment: .leading) {
Spacer()
VStack(alignment: .leading) {
// Button to close each walkthrough page...
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Image(systemName: "xmark.circle.fill")
Text("Close")
}
.padding(.leading)
.font(.title2)
.accentColor(.orange)
Spacer()
VStack {
Spacer()
Image(tabs[index].image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 415)
.padding(.leading, 10)
Text(tabs[index].title)
.font(.title)
.bold()
Text(tabs[index].text)
.padding()
Spacer()
}
.foregroundColor(.white)
}
}
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
}
Inserting view like above is not a presentation in standard meaning, that's why provided code does not work.
As this view is shown via showOnBoarding it should be hidden also via showOnBoarding, thus the solution is to pass binding to this state into view where it will be toggled back.
Due to deep hierarchy the most appropriate way is to use custom environment value. For simplicity let's use ResetDefault from https://stackoverflow.com/a/61847419/12299030 (you can rename it in your code)
So required modifications:
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
.environment(\.resetDefault, $showOnBoarding)
}
and in child view
struct TabDetailsView: View {
#Environment(\.resetDefault) var showOnBoarding
// .. other code
Button(action: {
self.showOnBoarding.wrappedValue.toggle()
}) {
Image(systemName: "xmark.circle.fill")
Text("Close")
}
Here is my code
struct ContentView: View {
#State var showingPopover = false
var body: some View {
VStack {
Spacer()
Text("Hello World")
Spacer()
HStack {
Spacer()
Button {
self.showingPopover.toggle()
} label: {
Image(systemName: "plus.circle")
}
.popover(isPresented: $showingPopover) {
List(0..<100) { Text("\($0)") }
}.padding(30)
}
}
}
}
This should produce a really nice popover coming from the plus button. But all I get is a really squashed down popover.
Any idea what I am missing here? Is there a way to tell the popover to expand more (without specifying a size)?
You may use a ScrollView and ForEach instead of a List:
struct ContentView: View {
#State var showingPopover = false
var body: some View {
VStack {
Spacer()
Text("Hello World")
Spacer()
HStack {
Spacer()
Button(action: {
self.showingPopover.toggle()
}) {
Image(systemName: "plus.circle")
}
.padding(30)
}
}
// can be attached to the button as well (as in the question)
.popover(isPresented: $showingPopover,
attachmentAnchor: .point(.bottomTrailing),
arrowEdge: .bottom) {
ScrollView(.vertical, showsIndicators: false) {
ForEach(0 ..< 100) {
Text("\($0)")
}
}
}
}
}
You can provide a custom frame for the List. Also, don't forget to embed List inside a ScrollView if you want it to scroll.
ScrollView {
List(0..<100) {
Text("\($0)")
}
.frame(width: 100, height: 250)
}