在 SwiftUI 中对齐包含的视图

Posted

技术标签:

【中文标题】在 SwiftUI 中对齐包含的视图【英文标题】:Aligning Contained Views in SwiftUI 【发布时间】:2019-06-19 18:54:13 【问题描述】:

好的。我正在努力将this project 复制为纯 SwiftUI 视图。

我的工作已经完成。我知道这个系统仍然有很多错误。第一次更新帮助很大,但仍然存在问题。

尽管如此,我仍然希望大部分问题都是我自己造成的。那些,我可以解决。

我以与原始控件相同的方式布置控件,具有三层:背景圆圈、中间可移动元素(微调器)和顶部透明蒙版。

圆圈已完成,我正在绘制微调器层。

我希望它看起来像这样:

我现在看起来像这样:

问题是我在获取图像尺寸以通知偏移量时遇到了麻烦,但我真正想要的是简单地将图像锚点置于顶部,以便对偏移量进行排序.

我试着弄乱alignmentGuideframe 的东西,但我一定没有很好地理解它,因为它们似乎被忽略了。

这是一个图像半径的the code snippet,这是应该发生的地方:

struct RVS_SwiftUISpinner_ItemDisplayView: View 
    @State var itemImage: Image
    @State var size: CGSize

    var body: some View 
        return VStack(alignment: .center, spacing: 0) 
            self.itemImage
                .resizable()
                .aspectRatio(contentMode: .fit)
                .offset(y: -self.size.height)
                .frame(alignment: .top)
        
        .frame(width: self.size.width,
               height: self.size.height,
               alignment: .bottom)
            .background(Color(red: 0, green: 1.0, blue: 1.0, opacity: 0.25))
        .offset(y: -self.size.height / 2.0)
    

有人看到我做错了吗?我会坚持下去,我最终会找到并解决这个问题,但我基本上还是会在进行过程中弥补这一点。

【问题讨论】:

我可以让它们进入圈子,但要倒置。我看看能不能把它们翻回来。 this answer 可能是相关的,但让我们看看... 【参考方案1】:

好的。我想我有它:

struct RVS_SwiftUISpinner_ItemDisplayView: View 
    @State var itemImage: Image
    @State var size: CGSize

    var body: some View 
        return VStack(alignment: .center, spacing: 0) 
            self.itemImage
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(alignment: .top)
        
        .frame(width: self.size.width,
               height: self.size.height,
               alignment: .top)
        .background(Color(red: 0, green: 1.0, blue: 1.0, opacity: 0.25))
        .offset(y: -self.size.height / 2.0)
    

我做了 OUTER 对齐 .top。

向前和向上...

【讨论】:

以上是关于在 SwiftUI 中对齐包含的视图的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI 如何将视图的前导对齐到最超级视图的前导?

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

SwiftUI:将视图与 VStack 中另一个视图的前缘和后缘对齐

SwiftUI如何对齐大于屏幕宽度的视图

SwiftUI从中心向右水平对齐

SwiftUI 自定义对齐方式推动视图比父视图更宽