如何将底边对齐到上面视图的中心 swiftui

Question

我目前正在尝试将人物图像的垂直中心 (/centerY) 与 SwiftUI 视图中渐变视图的底部边缘对齐。

代码：-

struct GroupDetailScreen: View {
var body: some View {
    ZStack{
        VStack {
            LinearGradient(gradient: Gradient(colors: [Color.red,Color.blue]), startPoint: .top, endPoint: .bottom)
                .frame(width:UIScreen.screenWidth,height: 180, alignment: .center)
                .clipped()
            ZStack{
                Image(systemName: "person.circle.fill")
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 100, height: 100)
                    .aspectRatio(contentMode: .fit)
            }
         }
      }
   }
}

输出

想要达到：-

谁能给我解释一下如何将人物图像的垂直中心 (/centerY) 与渐变视图的底部边缘对齐。我已经尝试通过上面实现但还没有结果。

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

我认为有几种方法可以做到这一点。

我在 overlay 和 offset 中使用了这种方式。

struct GroupDetailScreen: View {
var body: some View {
    ZStack{
        VStack {
            LinearGradient(gradient: Gradient(colors: [Color.red,Color.blue]), startPoint: .top, endPoint: .bottom)
                .frame(width: UIScreen.main.bounds.width, height: 180, alignment: .center)
                .clipped()
                .overlay(
                    Image(systemName: "person.circle.fill")
                        .renderingMode(.original)
                        .resizable()
                        .frame(width: 100, height: 100)
                        .aspectRatio(contentMode: .fit)
                        .offset(y: 90) // 1/2 of view height (180*(1/2)
                )
                .edgesIgnoringSafeArea(.all) // for ignore safe area
            
            Spacer()
         }
      }
   }
}

如何将底边对齐到上面视图的中心 swiftui

How to align bottom edge to Center of above view swiftui

swiftui

uiimageview

gradient

center

yaxis