VStack 前导对齐中的中心图像

Posted 2023-02-25

【中文标题】VStack 前导对齐中的中心图像

【英文标题】：Center Image in VStack leading alignment

【发布时间】：2021-01-18 06:52:34

【问题描述】：

我无法找出正确的解决方案，将Image 居中在VStack 内，对齐为.leading。我已经尝试并得到了这些结果，但有没有更有效的方法，而不是在 HStack 中添加两个 Spacer()？

struct ContentView: View 
    var body: some View 
        ZStack 
            ScrollView 
                VStack (alignment: .leading, spacing: 10) 
                    Text("Title ")
                    HStack 
                        Spacer()
                        Image(systemName:"star.fill")
                            .resizable()
                            .frame(width: 20, height: 20, alignment: .center)
                        Spacer()
                    
                    Divider()
                
            
        
        .padding(.all)
    

【参考方案1】：

这里有一个解决方案。使用 Xcode 12.1 / ios 14.1 测试

ScrollView 
    VStack (alignment: .leading, spacing: 10) 
        Text("Title ")
        Image(systemName:"star.fill")
            .resizable()
            .frame(width: 20, height: 20)
            .frame(maxWidth: .infinity, alignment: .center)
        Divider()
    

【讨论】：

看起来不错，谢谢@Asperi。添加两个frame 会皱眉吗？

这些是不同的修饰符（尽管两者都称为框架）并且每个都提供新的视图。这就像将一个视图嵌入到另一个具有不同边界的视图中。

好吧，这很有道理。谢谢！