I have a SwiftUI List, that changes an attribute on a row, e.g. color on a tap.
Now I want to start an action e.g. reset the color, if another row is tapped.
I´m looking for an event, that the row receives ,if it is deselected.
Here my example code:
struct ContentView: View {
#State var data : [String] = ["first","second","third","4th","5th"]
var body: some View {
List {
ForEach (data, id: \.self) {
item in
ColoredRow(text: item)
}
}
}
}
struct ColoredRow: View {
var text: String = ""
#State var col : Color = Color.white
var body: some View{
Text("\(text)")
.background(col)
.onTapGesture {
self.col = Color.red
}
// .onDeselect {
// print("disappeare \(self.text)")
// self.col = Color.white
// }
}
}
Let' recall that SwiftUI is reactive (ie. state-driven, not event-driven), so if we wan't to change something in UI we need to find a way to change it via state (either UI or model, but state).
So, below is slightly modified your code to show possible approach. Tested with Xcode 11.2 / iOS 13.2.
struct ContentView: View {
#State var data : [String] = ["first","second","third","4th","5th"]
#State private var selectedItem: String? = nil
var body: some View {
List {
ForEach (data, id: \.self) {
item in
ColoredRow(text: item, selection: self.$selectedItem)
}
}
}
}
struct ColoredRow: View {
var text: String = ""
#Binding var selection: String?
#State var col : Color = Color.white
var body: some View{
Text("\(text)")
.background(selection == text ? Color.red : Color.white)
.onTapGesture {
self.selection = (self.selection == self.text ? nil : self.text)
}
}
}
Related
I am trying to lay out a bunch of CustomTextViews which can toggle between a SwiftUI TextField or Text view.
Consider this example.
import SwiftUI
struct ContentView: View {
#StateObject var doc: Document = Document()
var body: some View {
ForEach(doc.lines, id: \.self) { line in
HStack {
ForEach(line, id: \.self) { word in
CustomTextView(text: word, document: doc)
.fixedSize()
}
Spacer()
}
}
.frame(width: 300, height: 300)
.background(.cyan)
}
}
struct CustomTextView: View {
#State var text: String
#State var isEditing: Bool = false
#ObservedObject var document: Document
var body: some View {
if isEditing {
TextField("", text: $text)
.onSubmit {
isEditing.toggle()
// NOTE: reset document anytime a word ends in "?"
if text.last! == "?" {
print("resetting")
document.lines = [["Reset"]]
print(document.lines)
}
}
} else {
Text(text)
.onTapGesture {
isEditing.toggle()
}
}
}
}
class Document: ObservableObject {
#Published var lines: [[String]] = [["Hello"]]
}
What I want to happen is that I should be able to indefinitely reset the text. But instead, the view only resets correctly once (see gif). All further updates to reset document.lines are not correct, even though the print statements show that the #Published property lines is clearly changing.
What am I doing wrong?
You need to update the textfield text with document.lines[index] where index is index of line into document.lines array. So you need to update like below.
struct CustomTextView: View {
#State var isEditing: Bool = false
#ObservedObject var document: Document
var body: some View {
if isEditing {
TextField("", text: $document.lines[index])
.onSubmit {
isEditing.toggle()
// NOTE: reset document anytime a word ends in "?"
if document.lines[index].last! == "?" {
print("resetting")
document.lines = [["Reset"]]
print(document.lines)
}
}
} else {
Text(text)
.onTapGesture {
isEditing.toggle()
}
}
}
}
Is there a way to delete all the list items in SwiftUI?
I'm using a ForEach() inside a List() and I want to have a clear all button to remove all the items from the list, is there a way to do it?
struct SwiftUIView: View {
#State var filters : [filter] = [filter(name: "new"), filter(name: "old"), filter(name: "some")]
#State var afterFilters : [someFilter] = []
var body: some View {
List{
ForEach(0..<self.filters.count, id:\.self){ i in
filterRepresent(string: self.$afterFilters[i].filter.name, isOn: self.$afterFilters[i].isOn)
}
}.onAppear {
for filter in self.filters {
self.afterFilters.append(someFilter(filter: filter))
}
}
}
}
struct filterRepresent : View {
#Binding var string : String
#Binding var isOn : Bool
var body : some View {
HStack{
Text(string)
Toggle("",isOn: $isOn)
}
}
}
struct filter {
var name : String
var isOn : Bool
init(name: String){
self.name = name
self.isOn = false
}
}
struct someFilter : Identifiable{
var id : Int
var filter : filter
var isOn : Bool
init(filter : filter){
self.id = Int.random(in: 0...100000)
self.filter = filter
self.isOn = filter.isOn
}
}
As you can see, in the example above, I'm using a #Binding to change the data I store based on the Toggle state, I want to have a button that deletes the entire list (in the real app the data to the list is uploaded from a server side into a temp array just like in the above) when I do it with .removeall() I get thrown with "out of index" error.
The button I use :
Button(action: {
self.afterFilters.removeAll()
}, label: {
Text("Clear all").font(Font.custom("Quicksand-Medium", size: 15))
})
The error I'm getting:
Fatal error: Index out of range: file /Library/Caches/com.apple.xbs/Sources/swiftlang/swiftlang-1103.2.25.13/swift/stdlib/public/core/ContiguousArrayBuffer.swift, line 444
You have to clean up model and view will be refreshed automatically.
Here is a simple demo:
struct DemoCleanUpList: View {
#State private var persons = ["Person 1", "Person 2", "Person 3"]
var body: some View {
VStack {
Button("CleanUp") { self.persons.removeAll() }
List {
ForEach(persons, id: \.self) { person in
Text(person)
}
}
}
}
}
i am sure i am making something wrong, but i don't know what.
I have a small list and i update texts with a timer which i can see in the debugger which updates. But the list won't be updated...
Thank you for help.
struct ListTest: View {
#State var texts : [String]
var body: some View {
List {
ForEach(self.texts, id: \.self) { text in
Text(text)
}
}
}
}
struct ContentView: View {
#State var texts = ["a"]
var body: some View {
ListTest(texts: self.texts)
.onAppear() {
Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true) { (timer) in
self.texts.append("\(self.texts.count)")
print(self.texts)
}
}
}
}
remove #State property wrapper from your ListTest
struct ListTest: View {
var texts : [String]
var body: some View {
List {
ForEach(self.texts, id: \.self) { text in
Text(text)
}
}
}
}
Finally, think about more "combine compatible" code
import SwiftUI
struct ListTest: View {
var texts: [String]
var body: some View {
List {
ForEach(self.texts, id: \.self) { text in
Text(text)
}
}
}
}
struct ContentView: View {
#State var texts = ["a"]
let tp = Timer.publish(every: 0.5, on: .main, in: .default).autoconnect()
var body: some View {
ListTest(texts: self.texts)
.onReceive(tp) { (date) in
self.texts.append("\(self.texts.count)")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
which is functionally equal
I have a picker in swiftUI that are used to show Units of Measure and convert between them. The picker is displayed correctly, but the values are not selected when choosing one of them.
import SwiftUI
struct ContentView: View {
#State private var originalValue = ""
#State private var originalUnit = ""
#State private var convertedUnit = ""
let lenghtUnits = ["meters", "miles", "yards"]
var convertedValue : Double {
return 0 // for now..
}
var body: some View {
NavigationView {
Form {
Section(header: Text("From:")) {
TextField("Value:", text: $originalValue)
.keyboardType(.decimalPad)
Picker("fromUnit" , selection: $originalUnit) {
ForEach(0 ..< lenghtUnits.count) {
Text("\(self.lenghtUnits[$0])")
}
}
.pickerStyle(SegmentedPickerStyle())
}
Section(header: Text("Result")) {
Text("\(convertedValue)")
}
}
.navigationBarTitle("Convert It")
}
}
}
try this. (added tags to your text and made your selection value an int)
struct ContentView: View {
#State private var originalValue = ""
#State private var originalUnit = 0
#State private var convertedUnit = ""
let lenghtUnits = ["meters", "miles", "yards"]
var convertedValue : Double {
return 0 // for now..
}
var body: some View {
NavigationView {
Form {
Section(header: Text("From:")) {
TextField("Value:", text: $originalValue)
.keyboardType(.decimalPad)
Picker("fromUnit" , selection: $originalUnit) {
ForEach(0 ..< lenghtUnits.count) { index in
Text("\(self.lenghtUnits[index])").tag(index)
}
}
.pickerStyle(SegmentedPickerStyle())
}
Section(header: Text("Result")) {
Text("\(convertedValue)")
}
}
.navigationBarTitle("Convert It")
}
}
}
I use a modal sheet whose content is updated for each call. However, when the content is marked as #State, the view body is never updated.
Is anyone seeing this as well? Is a workaround available?
This is the calling view:
struct ContentView: View {
#State var isPresented = false
#State var i = 0
var body: some View {
List {
Button("0") {
self.i = 0
self.isPresented = true
}
Button("1") {
self.i = 1
self.isPresented = true
}
}
.sheet(
isPresented: $isPresented,
content: {
SheetViewNOK(i: self.i)
}
)
}
}
This does work:
struct SheetViewOK: View {
var i: Int
var body: some View {
Text("Hello \(i)") // String is always updated
}
}
This does not work. But obviously, in a real app, I need to use #State because changes made by the user need to be reflected in the sheet's content:
struct SheetViewNOK: View {
#State var i: Int
var body: some View {
Text("Hello \(i)") // String is never updated after creation
}
}
In your .sheet you are passing the value of your ContentView #State to a new #State. So it will be independent from the ContentView.
To create a connection or a binding of your ContentView #State value, you should define your SheetView var as #Binding. With this edit you will pass the binding of your state value to your sheet view.
struct SheetView: View {
#Binding var i: Int
var body: some View {
Text("Hello \(i)")
}
}
struct ContentView: View {
#State var isPresented = false
#State var i: Int = 0
var body: some View {
List {
Button("0") {
self.i = 0
self.isPresented = true
}
Button("1") {
self.i = 1
self.isPresented = true
}
}.sheet(
isPresented: $isPresented,
content: {
SheetView(i: self.$i)
})
}
}
There are 3 different ways
use a binding
use multiple .sheets
use $item
This is fully explained in this video.
Multiple Sheets in a SwiftUI View