如何将底部边缘与上方视图的中心对齐 swiftui答案

【问题标题】：How to align bottom edge to Center of above view swiftui如何将底部边缘与上方视图的中心对齐 swiftui
【发布时间】：2021-09-29 00:48:09
【问题描述】：

我目前正在尝试将人物图像垂直中心 (/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) 与渐变视图的底部边缘对齐。我已经尝试按照上面的方法实现，但还没有结果。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： swiftui uiimageview gradient center yaxis

【解决方案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()
         }
      }
   }
}

【讨论】：