I'm trying to edit a List (composed of mutable strings) with an edit button and a function. My code is:
struct annotationsView: View {
#State private var text = ""
// annotations
#State var annotations : [[AnnData]] = [[]]
var body: some View {
VStack{
Form{
HStack{
TextField("Add your annotations here", text: $text)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button("Submit") {
annotations[annotations.count - 1].append(AnnData(Anntext: text))
self.hideKeyboard()
text = ""
}
}
List{
ForEach(annotations.indices, id:\.self){index in
ForEach(annotations[index].indices, id:\.self){annotationIndex in
Text(annotations[index][annotationIndex].Anntext)
}.onDelete(perform: self.deleteItem) //<-- Here
}
}
}
}
.background(
Image("Background")
.resizable()
.edgesIgnoringSafeArea(.all)
.navigationBarTitle(Text("Annotations"), displayMode: .inline)
)
.navigationBarItems(trailing: EditButton())
}
private func deleteItem(at indexSet: IndexSet) {
annotations.remove(atOffsets: indexSet)
}
}
struct AnnData : Identifiable{
var id = UUID().uuidString
var Anntext: String
}
Currently, I can not delete a single item; when I delete one, the rest are deleted automatilcally. Also, after that I can't add some items inside the List.
Would you mind explaining what's wrong here?
Thanks for your help!
You need to delete item within a loop because your data is a two-dimensional array.
Like this
List{
ForEach(annotations.indices, id:\.self){index in
ForEach(annotations[index].indices, id:\.self){annotationIndex in
Text(annotations[index][annotationIndex].Anntext)
}
.onDelete { (indexSet) in
annotations[index].remove(atOffsets: indexSet)
}//<-- Here
}
}
Related
macOS: It seems like setting .listStyle(.sidebar) disables the deletion of list cells on swipe. Why is that and how could a workaround look like?
struct ContentView: View {
#State private var numbers: [Int] = [1,2,3,4,5,6,7,8]
var body: some View {
List {
ForEach(numbers, id: \.self) { i in
Text("item \(i)")
}
.onDelete(perform: removeRows)
}
// .listStyle(.sidebar) // uncomment this line
}
func removeRows(at offsets: IndexSet) {
numbers.remove(atOffsets: offsets)
}
}
This is the code :
struct ContentView: View {
#State var names = ["A" , "B", "C", "D"]
var body: some View {
List {
ForEach(names, id: \.self ) { name in
Group {
testStruct(name: name)
}
}.onDelete(perform: removeItems)
}
}
private func removeItems (indexSet: IndexSet) {
names.remove(atOffsets: indexSet)
}
}
struct testStruct: View , Identifiable {
#State var name: String
let id = UUID()
var body: some View {
HStack {
Text(name)
Spacer()
Image(systemName: "folder.fill")
}
}
}
I am unable to remove the trailing red animation on swiping onDelete . Is there any elegant way of doing that . .animation() seem not to be working
I'm having a problem where I have a ForEach loop inside a NavigationView. When I click the Edit button, and then click the pencil image at the right hand side on each row, I want it to display the text variable we are using from the ForEach loop. But when I click the pencil image for the text other than test123, it still displays the text test123 and I have absolutely no idea why.
Here's a video. Why is this happening?
import SwiftUI
struct TestPopOver: View {
private var stringObjects = ["test123", "helloworld", "reddit"]
#State private var editMode: EditMode = .inactive
#State private var showThemeEditor = false
#ViewBuilder
var body: some View {
NavigationView {
List {
ForEach(self.stringObjects, id: \.self) { text in
NavigationLink( destination: HStack{Text("Test!")}) {
HStack {
Text(text)
Spacer()
if self.editMode.isEditing {
Image(systemName: "pencil.circle").imageScale(.large)
.onTapGesture {
if self.editMode.isEditing {
self.showThemeEditor = true
}
}
}
}
}
.popover(isPresented: $showThemeEditor) {
CustomPopOver(isShowing: $showThemeEditor, text: text)
}
}
}
.navigationBarTitle("Reproduce Editing Bug!")
.navigationBarItems(leading: EditButton())
.environment(\.editMode, $editMode)
}
}
}
struct CustomPopOver: View {
#Binding var isShowing: Bool
var text: String
var body: some View {
VStack(spacing: 0) {
HStack() {
Spacer()
Button("Cancel") {
self.isShowing = false
}.padding()
}
Divider()
List {
Section {
Text(text)
}
}.listStyle(GroupedListStyle())
}
}
}
This is a very common issue (especially since iOS 14) that gets run into a lot with sheet but affects popover as well.
You can avoid it by using popover(item:) rather than isPresented. In this scenario, it'll actually use the latest values, not just the one that was present when then view first renders or when it is first set.
struct EditItem : Identifiable { //this will tell it what sheet to present
var id = UUID()
var str : String
}
struct ContentView: View {
private var stringObjects = ["test123", "helloworld", "reddit"]
#State private var editMode: EditMode = .inactive
#State private var editItem : EditItem? //the currently presented sheet -- nil if no sheet is presented
#ViewBuilder
var body: some View {
NavigationView {
List {
ForEach(self.stringObjects, id: \.self) { text in
NavigationLink( destination: HStack{Text("Test!")}) {
HStack {
Text(text)
Spacer()
if self.editMode.isEditing {
Image(systemName: "pencil.circle").imageScale(.large)
.onTapGesture {
if self.editMode.isEditing {
self.editItem = EditItem(str: text) //set the current item
}
}
}
}
}
.popover(item: $editItem) { item in //item is now a reference to the current item being presented
CustomPopOver(text: item.str)
}
}
}
.navigationBarTitle("Reproduce Editing Bug!")
.navigationBarItems(leading: EditButton())
.environment(\.editMode, $editMode)
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct CustomPopOver: View {
#Environment(\.presentationMode) private var presentationMode: Binding<PresentationMode>
var text: String
var body: some View {
VStack(spacing: 0) {
HStack() {
Spacer()
Button("Cancel") {
self.presentationMode.wrappedValue.dismiss()
}.padding()
}
Divider()
List {
Section {
Text(text)
}
}.listStyle(GroupedListStyle())
}
}
}
I also opted to use the presentationMode environment property to dismiss the popover, but you could pass the editItem binding and set it to nil as well (#Binding var editItem : EditItem? and editItem = nil). The former is just a little more idiomatic.
I have this code:
struct ContentView: View {
#State private var items = [Int]()
#State private var value = 1
var body: some View {
VStack {
List {
ForEach(items, id: \.self) {
Text("\($0)")
}
.onDelete(perform: DeleteRow)
}
Button("Add Number") {
self.items.append(self.value)
self.value += 1
}
}
}
func DeleteRow(at offsets: IndexSet) {
DispatchQueue.main.asyncAfter(deadline: .now()) {
items.remove(atOffsets: offsets)
}
}
}
Want i want to do is to remove the stretchy top animation line when deleting an item . I could not find any solution online. I attached a pic . The red line attached to the animation is what i want to remove.I delete item 9 in this example.
I have a struct which shuffles and Lists records from CoreData.
I would like to reload / Refresh the List view with a Button.
I tried to use a function from within the Button.
Is there a way I can do this?
var body: some View {
VStack {
List {
ForEach(dictionary.shuffled().prefix(upTo: 10),id: \.self) { word in
HStack {
Text("\(word.englishWord)")
.foregroundColor(Color.blue)
Text("| \(word.urhoboWord) |")
.foregroundColor(Color.green)
Image(word.imageName)
.resizable()
.frame(width:40, height: 40)
}//HStack
}//End of ForEach
}//End of List
//Button to reload and shuffle list
Button(action: {}) {
Text("Shuffle")
.padding()
.background(Color.black)
.foregroundColor(Color.white)
.cornerRadius(6)
}
.navigationBarTitle(Text("Begin Learning"),displayMode: .inline)
Just trigger any value of the #State or #Published of #ObservableObject.
If you do not have such, just create one:
#State var refresh: Bool = false
func update() {
refresh.toggle()
}
You should move this dictionary.shuffled().prefix(upTo: 10) to your ViewModel and your view just reload base on the data.
Take a look at this code for reference:
struct SampleShuffleView : View {
#ObservedObject var viewModel : ShuffleViewModel = ShuffleViewModel()
var body : some View {
VStack {
List(self.viewModel.listData, id: \.self) { str in
Text(str)
}
Button(action: self.shuffle) {
Text("Shuffle me").padding()
}.background(Color.white).padding()
}
}
func shuffle() {
self.viewModel.shuffle()
}
}
class ShuffleViewModel : ObservableObject {
#Published var listData = ["one", "two", "three", "four"]
func shuffle() {
listData.shuffle()
//or listData = dictionary.shuffled().prefix(upTo: 10)
}
}
Note: All view's components will be reloaded when #ObservedObject changes, so consider to separate smaller view-viewmodel(s), or using #State variable.
Hope this helps.
Think about. To show array and shuffle on tap, do exactly what you would like to see. first show us the array in some "list" like manner and next shuffle it on user action.
struct ContentView: View {
#State var arr = ["ALFA", "BETA", "GAMA", "DELTA"]
var body: some View {
VStack {
VStack {
Divider()
ForEach(arr, id: \.self) { element in
VStack {
Text(element)
Divider()
}
}
}
Spacer()
Button(action: {
self.arr.shuffle()
}) {
Text("Shuffle")
}
Spacer()
}
}
}
arr.shuffle() changed the #State of View and force SwiftUI to "reload it" automatically.