Create blog with- VStack with a list
- List makes modifying and editing super easy.
1. Create a list with list of text
- Simply use List() and Text() to create a base code
List {
Text("Hello, World")
Text("Hello, World")
Text("Hello, World")
}2. Use array and ForEach()
- First, we create array of string named
fruitsincluding list of fruits.
@State var fruits: [String] = [
"apple", "orange", "banana", "kiwi"
]- Import
fruitsinto ForEach.- Declare the id with
\.selffruit inwill write each array of string value
- Declare the id with
List{
ForEach(fruits, id: \.self) { fruit in
Text(fruit)
}
}.capitalizedafter the text will make it capitaliezd
Text(fruit.capitalized)3. Add a Section of the list
Section()will createheader:andcontent:- We write a header text on the header
header: {Text("Fruits)}
- and we add a content in the curly brackets
- We write a header text on the header
Section {ForEach(fruits, id: \.self) {fruit in
Text(fruit)
}
} header: {
Text("Fruitss")
}4. Delete an Item (Swipe)
- add
.onDelete(perform: delete)afterSection{content}
Section{...} .onDelete(perform: delete)- onDelete will perform delete from function we created.
struct ContentView: View {
var body: some View {...}
func delete(indexSet: IndexSet){
fruits.remove(atOffsets: indexSet)
}
}- Now we can swipe to delete
5. Delete an Item (Edit)
- By adding
EditButton()on the toolbar will perform the edit
- by clicking edit, delete button will show on the list
List{...}
.toolbar{
ToolbarItem(placement: .bottomOrnament){
EditButton()
}
}#toolbar
6. Move an Item (Edit)
- Add
.onMoveafterSection{}
Section{...}
.onDelete(...)
.onMove(perform: { indices, newOffset in
fruits.move(
fromOffsets: indices,
toOffset: newOffset
}- Extract the function to make it simpler
func move(indices: IndexSet, newOffset: Int){
fruits.move(
fromOffsets: indices,
toOffset: newOffset
)
}- Rewrite
.onMove
.onMove(perform: move)7. Add an Item .append()
- Add
.topBarTrailingas a new toolbar button
ToolbarItem(placement: .topBarTrailing){...}- Add a button with
.appendstring value.- Pressing a button will add “peach” in the fruits array
Button("Button"){
fruits.append("peach")
}- Extract button function
func add() {
fruits.append("peach")
}Button("Button"){
add()
}- Extract the button as a separate View
var addButton: some View {
Button("Button"){
add()
}
}- We can simplify the toolBarItem
ToolbarItem(placement: .topBarTrailing){addButton}8. Add a list style
- We can change the style of list by adding
.listStyle()- Most of styles aren’t supported in VisionOS
.listStyle(...)Apple developer (List of Style)
9. List Style
List {
Section {
ForEach(fruits, id: \.self) {fruit in
Text(fruit)
}
.onDelete(perform: delete)
.onMove(perform: move)
} header: {
HStack{
Image(systemName: "flame.fill")
Text("Fruits").font(.largeTitle)
}.padding().glassBackgroundEffect().frame(depth: 100)
}
Section {
ForEach(veggies, id: \.self) {veggy in
Text(veggy)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.blue.opacity(0.9))
.padding(.vertical)
}
.onDelete(perform: delete)
.onMove(perform: move)
.listRowBackground(Color.green)
} header: {
Text("Veggies")
}
}- Creating a list with an array of text, adding sections, deleting items, moving items, and adding new items.
- Changing the list style
- Extracting functions and views
#visionOS #applevisionpro #swiftUI #appdevelopment
This video provides the opportunity to experience a spatial video on my Quest 2. The immersion was remarkable, similar to viewing a 3D movie up close with 3D glasses. However, I noticed that the performance fell short when it came to distant fixtures, scenes, or panoramic views. #VR #SpatialVideo #Quest2
\\
This video provides the opportunity to experience spatial video on my Quest 2. The immersion was remarkable, similar to viewing a 3D movie up close with 3D glasses. However, the performance was lacking when it came to distant fixtures, scenes, or panoramic views.