Firstly, I am a complete beginner in Swift and SwiftUI.
I am trying to create buttons or toggle feature similar to that of the youtube like/dislike function.
I can create the buttons but I'm struggling with, how to turn button A off when button B is toggled on, and vice versa. whilst also maintaining there individual on/off functionality when clicked.
I have seen similar questions being answered but not for SwiftUI
Thanks in advance!
struct ContentView: View{
#State var isOnGreen = false
#State var isOnRed = false
var body: some View {
HStack{
VStack {
Toggle(isOn: $isOnRed, label: {
Image (systemName: "arrowtriangle.down")
})
.toggleStyle(.button)
.tint(.red)
VStack {
Toggle(isOn: $isOnGreen, label: {
Image (systemName: "arrowtriangle.up")
})
.toggleStyle(.button)
.tint(.green)
}
Add a modifier to your HStack that monitors for the change in isOnRed or isOnGreen:
var body: some View {
HStack {
// ...
}
.onChange(of: isOnGreen) { val in
if val { isOnRed = false }
}
.onChange(of: isOnRed) { val in
if val { isOnGreen = false }
}
}
Related
This question already has answers here:
How to add a modifier to any specific buttons inside a ForEach loop for an array of buttons in SwiftUI?
(2 answers)
Closed 9 months ago.
I would like to animate a particular tapped button from the stack of buttons. Unfortunately withAnimation{} is applied to all the buttons created by FOREACH loop with no difference what button was actually tapped. Could you please recommend the right way to solve the issue? Here is my code:
import SwiftUI
struct ContentView: View {
#State private var buttonBackgroundColorRed = false
var body: some View {
VStack {
ForEach(1..<4) {num in
Button {
withAnimation {
buttonBackgroundColorRed.toggle()
}
} label: {
Text("Button \(num)")
}
.padding(10)
.background(buttonBackgroundColorRed ? .red : .blue)
.foregroundColor(.white)
.padding()
}
}
}
}
That is also possible, but it is simpler to extract ForEach row into standalone view with own state
struct ContentView: View {
struct Row: View {
let num: Int
#State private var buttonBackgroundColorRed = false
var body: some View {
Button {
withAnimation {
buttonBackgroundColorRed.toggle()
}
} label: {
Text("Button \(num)")
}
.padding(10)
.background(buttonBackgroundColorRed ? .red : .blue)
.foregroundColor(.white)
.padding()
}
}
var body: some View {
VStack {
ForEach(1..<4) {num in
Row(num: num)
}
}
}
}
Consider the following example with a list and a button wrapped in a HStack that opens up a sheet:
struct ContentView: View {
#State var text: String = ""
#State var showSheet = false
var body: some View {
NavigationView {
List {
HStack {
button
}
Text("Hello World")
}
.searchable(text: $text)
}
}
var button: some View {
Button("Press", action: { showSheet = true })
.sheet(isPresented: $showSheet) {
modalView
}
}
var modalView: some View {
NavigationView {
List {
Text("Test")
}
}
}
}
On press of the button, a modal is presented to the user. However, the searchable modifier gets passed to the modal, see this video.
Now if the HStack is removed, everything works fine:
List {
button
Text("Hello World")
}
In addition, everything works also fine if the modal is not a NavigationView:
var modalView: some View {
List {
Text("Test")
}
}
Does somebody know what the problem here might be or is it once again one of those weird SwiftUI bugs?
putting the sheet, outside of the button and the List, works for me. I think .sheet is not meant to be inside a List, especially where searchable is operating.
struct ContentView: View {
#State var text: String = ""
#State var showSheet = false
var body: some View {
NavigationView {
List {
HStack {
button
}
Text("Hello World")
}
.searchable(text: $text)
}
.sheet(isPresented: $showSheet) {
modalView
}
}
var button: some View {
Button("Press", action: { showSheet = true })
}
var modalView: some View {
NavigationView {
List {
Text("Test")
}
}
}
}
Another workaround is to use navigationBarHidden = true, but then you must live without the navigation bar in the sheet view.
var modalView: some View {
NavigationView {
List {
Text("Test")
}
.navigationBarHidden(true)
}
}
Btw, on iPadOS it helps to use .searchable(text: $text, placement: .sidebar)
I want to detect if the user meets the prerequisite first before I let him/her in. If the prerequisite is not met, the app will pop an actionSheet and show the user some ways to unlock the feature.
It works perfectly fine when I tap on the text. But when I tap on the blank place on the list. It just skip the Binding. And the weird thing is that in my actually project, the Binding becomes "true" even if I only set it to false.
Here's the question. Am I using the correct approach or did I miss anything? Or is this a bug?
Thank you.
struct ContentView: View {
#State var linkOne = false
#State var linkTwo = false
#State var linkThree = false
#State var actionOne = false
#State var actionTwo = false
#State var actionThree = false
var body: some View {
NavigationView{
List{
NavigationLink("Destination View One", destination: DestOneView(), isActive: self.$linkOne)
.actionSheet(isPresented: self.$actionOne) { () -> ActionSheet in
ActionSheet(title: Text("Hello"), message:Text("This is weird"), buttons: [ActionSheet.Button.cancel()])
}.onTapGesture {
self.actionOne = true
// self.linkOne = true
}
NavigationLink("Destination View Two", destination: DestTwoView(), isActive: self.$linkTwo)
.actionSheet(isPresented: self.$actionTwo) { () -> ActionSheet in
ActionSheet(title: Text("Hello"), message:Text("This is weird"), buttons: [ActionSheet.Button.cancel()])
}
.onTapGesture {
self.actionTwo = true
// self.linkTwo = true
}
NavigationLink("Destination View Three", destination: DestThreeView(), isActive: self.$linkThree)
.actionSheet(isPresented: self.$actionThree) { () -> ActionSheet in
ActionSheet(title: Text("Hello"), message:Text("This is weird"), buttons: [ActionSheet.Button.cancel()])
}
.onTapGesture {
self.actionThree = true
// self.linkThree = true
}
}
}
}
}
Three other views.
struct DestOneView: View {
var body: some View {
Text("First View")
}
}
struct DestTwoView: View {
var body: some View {
Text("Second View")
}
}
struct DestThreeView: View {
var body: some View {
Text("Third View")
}
}
Generally overriding gestures does not work well within the List. One of the solutions can be to use a Button to present a NavigationLink:
import SwiftUI
struct ContentView: View {
#State private var linkOne = false
...
var body: some View {
NavigationView {
List {
NavigationLink(destination: SomeView(), isActive: $linkOne) {
EmptyView()
}
Button(action: {
// here you can perform actions
self.linkOne = true
}, label: {
Text("Some text!")
})
Spacer()
}
}
}
}
When I came back and tested my the code. The solution didn't really work. May be because of the List's bug. People on another post said that the List in the new view only show once if the sheet is inside the List. So I only got an empty List in the new view when I tap the button in Xcode Version 11.5. For some reasion, if I use NavigationView, all contents are shrunk into the middle of the view instead of aligning to the top.
My work around is to set the Binding in .onAppear. It pops the actionSheet when the view loads. And then use the presentationMode method to return to the previous view.
#Environment(\.presentationMode) var presentationMode
.
.
.
ActionSheet.Button.default(Text("Dismiss"), action: {
self.presentationMode.wrappedValue.dismiss()}
I have a view for a list item that displays some news cards within a navigationLink.
I am supposed to add a like/unlike button within each news card of navigationLink, without being took to NavigationLink.destination page.
It seems like a small button inside a big button.
When you click that small one, execute the small one without executing the bigger one.
(note: the click area is covered by the two buttons, smaller one has the priority)
(In javascript, it seems like something called .stopPropaganda)
This is my code:
var body: some View {
NavigationView {
List {
ForEach(self.newsData.newsList, id:\.self) { articleID in
NavigationLink(destination: NewsDetail(articleID: articleID)) {
HStack {
Text(newsTitle)
Button(action: {
self.news.isBookmarked.toggle()
}) {
if self.news.isBookmarked {
Image(systemName: "bookmark.fill")
} else {
Image(systemName: "bookmark")
}
}
}
}
}
}
}
}
Currently, the button action (like/dislike) will not be performed as whenever the button is pressed, the navigationLink takes you to the destination view.
I have tried this almost same question but it cannot solve this problem.
Is there a way that makes this possible?
Thanks.
as of XCode 12.3, the magic is to add .buttonStyle(PlainButtonStyle()) or BorderlessButtonStyle to the button, when said button is on the same row as a NavigationLink within a List.
Without this particular incantation, the entire list row gets activated when the button is pressed and vice versa (button gets activated when NavigationLink is pressed).
This code does exactly what you want.
struct Artcle {
var text: String
var isBookmarked: Bool = false
}
struct ArticleDetail: View {
var article: Artcle
var body: some View {
Text(article.text)
}
}
struct ArticleCell: View {
var article: Artcle
var toggle: () -> ()
#State var showDetails = false
var body: some View {
HStack {
Text(article.text)
Spacer()
Button(action: {
self.toggle()
}) {
Image(systemName: article.isBookmarked ? "bookmark.fill" : "bookmark").padding()
}
.buttonStyle(BorderlessButtonStyle())
}
.overlay(
NavigationLink(destination: ArticleDetail(article: article), isActive: $showDetails) { EmptyView() }
)
.onTapGesture {
self.showDetails = true
}
}
}
struct ContentView: View {
#State var articles: [Artcle]
init() {
_articles = State(initialValue: (0...10).map { Artcle(text: "Article \($0 + 1)") })
}
func toggleArticle(at index: Int) {
articles[index].isBookmarked.toggle()
}
var body: some View {
NavigationView {
List {
ForEach(Array(self.articles.enumerated()), id:\.offset) { offset, article in
ArticleCell(article: article) {
self.toggleArticle(at: offset)
}
}
}
}
}
}
Here is a bug in SwiftUI when you show modal from button inside navigation bar items.
In code below Button 1 works as expected, but Button 2 works only once:
struct DetailView: View {
#Binding var isPresented: Bool
#Environment (\.presentationMode) var presentationMode
var body: some View {
NavigationView {
Text("OK")
.navigationBarTitle("Details")
.navigationBarItems(trailing: Button(action: {
self.isPresented = false
// or:
// self.presentationMode.wrappedValue.dismiss()
}) {
Text("Done").bold()
})
}
}
}
struct ContentView: View {
#State var showSheetView = false
var body: some View {
NavigationView {
Group {
Text("Master")
Button(action: { self.showSheetView.toggle() }) {
Text("Button 1")
}
}
.navigationBarTitle("Main")
.navigationBarItems(trailing: Button(action: {
self.showSheetView.toggle()
}) {
Text("Button 2").bold()
})
}.sheet(isPresented: $showSheetView) {
DetailView(isPresented: self.$showSheetView)
}
}
}
This bug is from the middle of the last year, and it still in Xcode 11.3.1 + iOS 13.3 Simulator and iOS 13.3.1 iPhone XS.
Is here any workaround to make button work?
EDIT:
Seems to be tap area goes somewhere down and it's possible to tap below button to show modal.
Temporary solution to this is to use inline navigation bar mode:
.navigationBarTitle("Main", displayMode: .inline)
Well, the issue is in bad layout (seems broken constrains) of navigation bar button after sheet has closed
It is clearly visible in view hierarchy debug:
Here is a fix (workaround of course, but safe, because even after issue be fixed it will continue working). The idea is not to fight with broken layout but just create another button, so layout engine itself remove old-bad button and add new one refreshing layout. The instrument for this is pretty known - use .id()
So modified code:
struct ContentView: View {
#State var showSheetView = false
#State private var navigationButtonID = UUID()
var body: some View {
NavigationView {
Group {
Text("Master")
Button(action: { self.showSheetView.toggle() }) {
Text("Button 1")
}
}
.navigationBarTitle("Main")
.navigationBarItems(trailing: Button(action: {
self.showSheetView.toggle()
}) {
Text("Button 2").bold() // recommend .padding(.vertical) here
}
.id(self.navigationButtonID)) // force new instance creation
}
.sheet(isPresented: $showSheetView) {
DetailView(isPresented: self.$showSheetView)
.onDisappear {
// update button id after sheet got closed
self.navigationButtonID = UUID()
}
}
}
}