Como tornar uma lista editável em SwiftUI
Olá pessoal! Nesse post vamos ver como facilitar a edição dos textos em uma lista. Muitas vezes vemos listas estáticas, sem a possibilidade de editar os elementos na lista e ficarem salvos.
Vamos lá?
1- Criando um modelo
Primeiro precisamos criar um Model para os itens da lista. No caso abaixo, iremos inserir 3 variáveis, sendo elas um para String do item, um Bool para saber do status e outra para o foco dele. Não se esqueça de inicializa-los!
final class Item {
let id: UUID = UUID()
var name: String
var status: Bool
var focus: Bool
init(name: String, status: Bool, focus: Bool) {
self.name = name
self.status = status
self.focus = focus
}
}2- Componentizando a lista
Antes de criarmos a lista em si, iremos componentiza-lá. Ou seja, primeiro vamos criar a linha de cada lista. Temos um arquivo chamado ListRowView que é do tipo View.
Segue abaixo todo o código, porém vamos entendê-lo por partes.
import Foundation
import SwiftUI
struct ListRowView: View {
@Bindable var item: Item
@State var itemDaFeira: String = ""
@FocusState var isFocused
var body: some View {
HStack{
ToggleView(item: item)
TextField( "item" , text: $itemDaFeira)
.focused($isFocused)
.onSubmit() {
item.name = itemDaFeira
item.focus = false
}
.onAppear(){
itemDaFeira = item.name.capitalized
isFocused = item.focus
}
}
.foregroundColor(Color.black)
}
}Ele apresenta um property wrapper @Bindable que nos ajuda a encontrar todos os objetos do nosso modelo, que no caso é o Item. Também temos um @State chamado itemAdd, que é uma String. E por último uma property wrapper para rastrear qual visualização recebe atualmente a entrada do usuário.
@Bindable var item: Item
@State var itemAdd: String = ""
@FocusState var isFocusedNa View, temos uma HStack, que se refere a cada linha da lista. Ela apresenta a ToggleView, que basicamente é um arquivo criado para criar o toggle do elemento da lista. Depois disso, temos o TextField. Atenção, pois ele é o principal elemento que torna a lista editável. Primeiro inserimos uma TitleKey, que é o que estará escrito no campo de texto e depois o texto para exibir e editar.
O .focused( ) ajuda a controlar a entrada dos itens, enquanto o .onSubmit( ) é um modificador que executará uma função após o o usuário terminar de inserir o texto no TextField. Por último, temos o .onAppear( ), que é um evento no qual será executado sempre que a visualização se tornar visível. Nesse caso, o item adicionado irá aparecer.
var body: some View {
HStack{
ToggleView(item: item)
TextField( "item" , text: $itemAdd)
.focused($isFocused)
.onSubmit() {
item.name = itemAdd
item.focus = false
}
.onAppear(){
itemAdd = item.name.capitalized
isFocused = item.focus
}
}
.foregroundColor(Color.black)
}3- Criando a lista
Depois do Modelo e a ListRowView criados, vamos para a criação da Lista! Para isso, criei um novo arquivo chamado ListView que é do tipo View. Segue todo o código novamente abaixo.
struct ListView: View {
@Environment(\.modelContext) private var modelContext
@Query private var items: [Item]
@State private var addOn: Bool = false
@FocusState private var isFocused: Bool
var body: some View{
NavigationView(){
List{
ForEach(items) { item in
ListRowView(item: item)
.swipeActions(edge: .trailing) {
Button(action: {
deleteItem(item: item)
}, label: {
Image(systemName: "trash")
.tint(.red)
})
}
.listSectionSeparator(.hidden, edges: .top)
}
.padding(5)
.listRowSeparatorTint(Color("azul"))
.listSectionSeparator(.visible)
}
}No meu caso, o SwiftData já está implementado, por isso a utilização do @Environment e @Query. O @Query é uma var de items dentro do array Item. Lá serão adicionados todos os itens no Model. Temos novamente uma property wrapper para rastrear qual visualização recebe atualmente a entrada do usuário.
@Environment(\.modelContext) private var modelContext
@Query private var items: [Item]
@FocusState private var isFocused: BoolNa NavigationView( ) temos a lista. Para inserir o item na Lista, utilizamos o ForEach para percorrer cada item em nosso array de itens. Adicionamos aqui o arquivo ListRowView, onde o item aparecerá. Por último, adicionamos alguns modificadores para tornar nossa lista personalizada. Também inserimos uma função para, caso o usuário queira deletar o item da lista, basta deslizar o item para o lado.
NavigationView(){
List{
ForEach(items) { item in
ListRowView(item: item)
.swipeActions(edge: .trailing) {
Button(action: {
deleteItem(item: item)
}, label: {
Image(systemName: "trash")
.tint(.red)
})
}
.listSectionSeparator(.hidden, edges: .top)
}
.padding(5)
.listRowSeparatorTint(Color("azul"))
.listSectionSeparator(.visible)
.toolbar{
ToolbarItem(placement: .primaryAction) {
Button() {
addItem()
} label: {
HStack{
Image(systemName: "plus.circle")
.foregroundColor(Color("amarelo"))
.bold()
.frame(alignment: .leading)
.font(.system(size: 20))
}
}
}
}
.navigationTitle("Lista")
}Com a toolbar adicionada, é possível adicionar os itens na lista.
private func addItem() {
withAnimation {
let newItem = Item(name: itens, status: false, focus: true )
modelContext.insert(newItem)
}
}Essa é uma maneira simples e eficaz de tornar a lista antes estática, editável. Dessa forma, é possível utilizar a lista de diversas maneiras no SwiftUI!
