ios - 在 SwiftUI 的滚动视图中添加新项目

Question

我试图在滚动视图中添加一个新视图，每次单击底部的蓝色按钮时都会包含一个按钮

] 1

在这里，我创建了带有 2 个按钮的滚动视图，并希望在单击右侧的按钮后添加更多

        HStack{
            ScrollView(.horizontal, content: {
                HStack{
                    PageStep()
                    PageStep()

                }
            })

            Button(action: {
                self.addNewStep = true
            }) {
                Image(systemName: "plus.square")
                    .frame(width: 75, height: 75)
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.blue, lineWidth: 5)
                )
            }.buttonStyle(PlainButtonStyle()).padding(.trailing, 10)
        }
        .padding(.leading, 10)
        .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.width, minHeight: 80, alignment: .bottom)
        .foregroundColor(Color.blue)

struct PageStep: View {
    var stepPossition = String()

    var body: some View {

        Button(action: {
            print("Entrou")
        }){
            Rectangle()
                .fill(Color.red)
                .frame(width: 75, height: 75)
                .cornerRadius(10)
        }

    }
}

Answer 1

这是可能的方法。使用 Xcode 11.4 测试。

struct ContentView: View {
    @State private var steps = 2 // pages counter

    var body: some View {
        HStack{
            ScrollView(.horizontal, content: {
                HStack{
                    // create available pages
                    ForEach(0..<steps, id: \.self) { i in
                        PageStep(stepPossition: "\(i)").id(i) // inject
                    }
                }
            })

            Button(action: {
                self.steps += 1 // << add next page
            }) {
                Image(systemName: "plus.square")
                    .frame(width: 75, height: 75)
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.blue, lineWidth: 5)
                )
            }.buttonStyle(PlainButtonStyle()).padding(.trailing, 10)
        }
        .padding(.leading, 10)
        .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.width, minHeight: 80, alignment: .bottom)
        .foregroundColor(Color.blue)

    }
}

struct PageStep: View {
    var stepPossition: String

    var body: some View {

        Button(action: {
            print("Entrou")
        }){
            Rectangle()
                .fill(Color.red)
                .frame(width: 75, height: 75)
                .cornerRadius(10)
        }

    }
}