SwiftUI 仿 Instagram 顶部用户选择轮播组件（教程含源码）

在这个故事中，您将学习如何在 SwiftUI 中创建 Instagram 故事轮播：

让我们从创建圆形视图开始。创建一个新文件并将其命名为ProfileView。要复制 Instagram 拥有的那个，我们需要添加一个圆形轮廓图像，周围有一个带边框的圆形渐变。我们还希望这个视图可以在不同的配置文件中重复使用，所以我们将在顶部给它两个变量。让我们称这些为image和name。将以下内容添加到您的ProfileView视图中：

struct ProfileView: View {
    var image: String
    var name: String
    
    var body: some View {
        VStack {
            Image(image)
                .resizable()
                .frame(width: 60, height: 60)
                .cornerRadius(50)
        }
    }
}

struct ProfileView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileView(image: "profile", name: "Simon McNeil")
    }
}

这将为我们提供一个简单的小圆形轮廓。要添加渐变边框背景，我们将使用带有圆形的叠加修改器。圆形将使用描边和框架修改器。像这样更新您的图像视图：

  var body: some View {
        VS