如何在SwiftUI中创建一个视图内部嵌套另一个视图？

Question

如何在SwiftUI中创建一个视图内部嵌套另一个视图？

6

我需要做一件简单的事情，但不知道如何实现。

所以我需要创建一个视图，这个视图已经存在于另一个视图中。下面是它的样子↓

这是我的按钮：

struct CircleButton: View {
    var body: some View {
        
        Button(action: {
            self
            
        }, label: {
            Text("+")
                .font(.system(size: 42))
                .frame(width: 57, height: 50)
                .foregroundColor(Color.white)
                .padding(.bottom, 7)
        })
        .background(Color(#colorLiteral(red: 0.4509803922, green: 0.8, blue: 0.5490196078, alpha: 1)))
        .cornerRadius(50)
        .padding()
        .shadow(color: Color.black.opacity(0.15),
                radius: 3,
                x: 0,
                y: 4)
    }
}

当我点击按钮时，下面是我想要放置的视图↓

struct IssueCardView: View {
    
    var body: some View {
        
        ZStack (alignment: .leading) {
            Rectangle()
                
                .fill(Color.white)
                .frame(height: 50)
                .shadow(color: .black, radius: 20, x: 0, y: 4)
                .cornerRadius(8)
            
            VStack (alignment: .leading) {
                
                    Rectangle()
                        .fill(Color(#colorLiteral(red: 0.6550863981, green: 0.8339114785, blue: 0.7129291892, alpha: 1)))
                        .frame(width: 30, height: 8)
                        .cornerRadius(8)
                        .padding(.horizontal, 10)
                
                    
                    Text("Some text on card here")
                        .foregroundColor(Color(UIColor.dark.main))
                        .font(.system(size: 14))
                        .fontWeight(.regular)
                        .padding(.horizontal, 10)
            }

        }
    }
}

这里有一个视图，我想把这个 IssueCardView 放在下面 ↓。现在是手动完成的，但我想通过按钮来生成此视图。

struct TaskListView: View {
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false, content: {
            VStack (alignment: .leading, spacing: 8) {
                
                **IssueCardView()
                IssueCardView()
                IssueCardView()
                IssueCardView()
                IssueCardView()**
                
            }
            .frame(minWidth: 320, maxWidth: 500, minHeight: 500, maxHeight: .infinity, alignment: .topLeading)
            .padding(.horizontal, 0)
        })
    }
}

- Nick Samoylov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mojtaba Hosseini · Accepted Answer

虽然它可以与scrollView和stack一起使用，但对于这些类型的UI问题，您应该使用一个List（正如您在TaskListView名称中已经提到的那样）。

struct TaskListView: View {

    typealias Issue = String // This is temporary, because I didn't have the original `Issue` type

    @State var issues: [Issue] = ["Some issue", "Some issue"]

    var body: some View {
        ZStack {
            List(issues, id: \.self) { issue in
                IssueCardView()
            }

            CircleButton {
                self.issues += ["new issue"]
            }
        }
    }
}

我已经在CircleButton中添加了let action: ()->()，这样我就可以将操作传递给它。