Hello everyone!
I am trying to build an app that has a quizzer.
Users need to select an answer they think is correct. I want the selected answer to be highlighted, but users should be able to change their answer. I currently have it working that the answer is highlighted, but when i choose another answer, multiple options are highlighted. How can i change it, so that when i choose a different answer, the other one is no longer highlighted?
Here is my AnswerRow component used to display the answers:
import SwiftUI
struct AnswerRow: View {
var answer: Answer
@State private var isSelected = false
var selectedColor = Color(.black)
var body: some View {
HStack(spacing: 20) {
Image(systemName: "circle.fill")
.font(.caption)
Text(answer.answerText)
.bold()
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(.white)
.cornerRadius(10)
.overlay (
RoundedRectangle(cornerRadius: 20)
.stroke(isSelected ? selectedColor : .gray, lineWidth: 2)
)
.onTapGesture {
isSelected = true
}
}
}
Here is the way i am implementing it in a view:
(...)
AnswerRow(answer: Answer(id: 0, answerText: "Answer 1"))
AnswerRow(answer: Answer(id: 01, answerText: "Answer 2"))
AnswerRow(answer: Answer(id: 02, answerText: "Answer 3"))
(...)
If you have any other tips / suggestions for my code, feel free!
Thanks in advance for the help!
Post
Replies
Boosts
Views
Activity
Hello,
I have made a picker that is filled with data from an API endpoint. The data is retrieved and shown properly, however, when trying to change the selection on the picker, it does not work.
For simple demonstration i have put the picker in a empty view. Here is the code:
import SwiftUI
struct TestView: View {
struct Subject: Hashable {
let subjectId: Int
let subjectName: String
}
@State var subjects: [Subject] = []
@State var selectedSubject: Subject? = nil
var body: some View {
VStack {
Picker(selection: $selectedSubject, label: Text("Kies een vak")) {
ForEach(subjects, id: \.self) { subject in
Text(subject.subjectName).tag(subject)
}
}
.frame(width: 300, height: 50)
.background(Color.black.opacity(0.05))
.cornerRadius(10)
.onChange(of: selectedSubject) { newSubject in
print("Chosen subject: \(newSubject?.subjectId ?? -1)")
}
Text("Chosen subject: \(selectedSubject?.subjectId ?? -1)")
}
.onAppear {
Api().extractSubjects { subjects in
DispatchQueue.main.async {
self.subjects = subjects.map { TestView.Subject(subjectId: $0.subjectId, subjectName: $0.subjectName) }
}
}
}
}
}
To better illustrate what I mean i have made a screenrecording:
I hope you guys and girls can help me out. If you need more info, please let me know!
Any help or suggestion is greatly appreciated, thanks!
Hi everyone,
I am new to coding and wanted to try and make an app. So far it has been going quite well, especially with the useful tips and solutions posted on this forum.
Now something strange has been going on with my project that I am unable to resolve / find on the internet. Im hoping you can help.
I created a short video to demonstrate what is going wrong. You can watch that here:
(I don't know where else to upload it)
https://www.youtube.com/watch?v=SY0cja7gitQ&feature=youtu.be
In short the problem is as follows:
Whenever i make a change in modifiers / add modifiers, the view completely dissapears. Besides that, the menu that i have made also loses some of its styling, like ignoreSafeEdges and the background opacity.
This also happens on the sideBar.view but not on other views like the login page (contentView).
Here is the code for my dashboardView (which is seen in the video). I personally think it has something to do with the sideBar because the other views don't show this sideBar.
import SwiftUI
struct DashboardView: View {
@State private var isSideBarOpened = false
var body: some View {
ZStack {
NavigationStack {
VStack {
Text("Welkom op het dashboard")
.font(.title)
.fontWeight(.bold)
VStack {
Text("Ga direct oefenen hoe u wilt, of kijk of u er klaar voor bent met een oefenexamen!")
.padding()
HStack {
Button {
// naar practiceView
} label: {
Text("Test")
}
.padding()
Button {
// naar practiceExamenView
} label: {
Text("Oefenexamens")
}
.padding()
}
}
.border(.gray)
.padding()
}
}
Sidebar(isSidebarVisible: $isSideBarOpened)
}
.navigationBarBackButtonHidden(true)
}
struct DashboardView_Previews: PreviewProvider {
static var previews: some View {
DashboardView()
}
}
}
I can also share the sidebar code if you guys/girls think that is necessary.
Its not that big of a deal as I can get the view back the by going to the login in page and then return to the dashboardView, but I just want to know / resolve this to prevent it from happening in the live version if it gets released.
Thanks in advance!