This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

A, EditorButton

Achieve the image below

struct Item: Identifiable {
    let id = UUID(a)let title: String
}
struct ContentView: View {
    
    @State var editMode = EditMode.inactive
    
    @State private var items: [Item] = (0..<5).map { Item(title: "Item #\ [$0)")}@State private var count = 0
        
    var body: some View {
       
        NavigationView{
            List{
                    ForEach(items){item in
                    Text(item.title)
                }.onDelete(perform: {offsets in
                    items.remove(atOffsets: offsets)
                }).onMove(perform: { source, destination in
                    items.move(fromOffsets: source, toOffset: destination)
                })
            }.onAppear(){
                count = items.count
            }
            .navigationBarTitle("List")
            .navigationBarItems(leading: EditButton(), trailing: Button("Add", action: {
                items.append(Item(title: "Item #\(count)"))
                count + = 1
            })).environment(\.editMode, $editMode)}}}Copy the code
  • forListincrease.environment(\.editMode, $editMode)Property, you can switchListEdit mode.
  • navigationBarItemstheleadingButton specified asEditButton()It will followeditModeChange with change.
  • ForEachincreaseonDeleteAttribute, add delete element function, parameteroffsetsTo deleteitems.
  • ForEachincreaseonMoveProperty to add the move element function, the first parametersourceFor being moveditems, the second parameterdestinationFor the destination to move to.

Second, the ProgressView

The default use of ProgressView() is used as an in-load animation.

If you specify.ProgressViewStyle (LinearProgressViewStyle()) manually, it is a progress bar.

ProgressView(value: 50, total: 100, label: () -> _, currentValueLabel: () -> _)
Copy the code
  • valueIs the current progress value.
  • totalSpecifies the total progress value.
  • labelYou can add a view above the progress bar. You can view it the other way around, so the progress bar is below the view.
  • currentValueLabelYou can add views below the progress bar.

By specifying a view above or below the progress bar, you can achieve a panoramic progress bar visual sense. The diagram below:

The code is as follows:

struct ContentView: View {
    var body: some View {
       
// ProgressView(value: 50, total: 100) {
// } currentValueLabel: {
// Rectangle()
/ /}
        
        ProgressView(value: 50, total: 100) {
            Rectangle().foregroundColor(.gray)
        }
    }
}
Copy the code

Value can control progress bar changes by passing in a Binding variable.

The code is as follows:

struct ContentView: View {
    @State var value = CGFloat(5)
    var body: some View {
        ProgressView(value: value, total: 100) {
            ScrollView{
                Button(action: {
                    value + = 5
                }, label: {
                    Text("add").font(.title)
                })
            }
        }
    }
}
Copy the code

Note: The progress value should not exceed the total value, otherwise an error will be reported.

  • The customProgressView

To create a custom ProgressView, you need to create a struct that implements the makeBody method of the ProgressViewStyle protocol.

 struct DarkBlueShadowProgressViewStyle: ProgressViewStyle {
     func makeBody(configuration: Configuration) -> some View {
         ProgressView(configuration)
             .shadow(color: Color(red: 0, green: 0, blue: 0.6),
                     radius: 4.0, x: 1.0, y: 2.0)}}Copy the code

This takes effect by specifying ProgressViewStyle.

VStack(spacing: 50) {
    ProgressView(a)ProgressView(value: 0.75)
}
.progressViewStyle(DarkBlueShadowProgressViewStyle())
Copy the code