SwiftUI Stack中的View被壓縮的效果

一、背景

　　我們在佈局中，經常會遇到視圖元素排列時空間不足或者空間過大的情況，在這種場景下面，不同的佈局方式有不同的方法：

　　絕對佈局frame：純靠計算過程控制，獲取父視圖的大小，根據需求，計算自己需要的大小，並設置到frame上去

　　iOS autolayout：這裏更先進一點，將視圖中的約束預設進佈局的DSL中，當視圖的尺寸發生變化的時候，根據DSL描述修改視圖的尺寸，這個是自動化完成的

　　swiftui：目前來看可以使用frame的最大值最小值理想值完成約束預設，此外還可以通過view的modifier進行預設

 

二、例子

struct CharView: View {
    var body: some View {
        HStack {
        }.frame(minWidth: 50, maxWidth: 100, minHeight: 50, maxHeight: 100)
         .background(.green)
         .border(.red)
         .overlay {
             GeometryReader { proxy in
                       Text("\(proxy.size.width) x \(proxy.size.height)")
            }
         }
    }
}

struct WordView: View {
    var body: some View {
        HStack(spacing: 0) {
            CharView().layoutPriority(1.0)
            CharView().layoutPriority(2.0)
        }
        .frame(width: 160, height: 100)
        .fixedSize(horizontal: false, vertical: true)
        .border(.yellow)
    }
}

 

 

這邊有兩個view，分別設置的最大寬度100，最小寬度50； 同時父容器是160，那麼兩個容器放不下，這個時候，會優先佈局優先級高的容器，所以右邊的視圖是100， 左邊視圖是60

這裏的優先級和Flex中的 flex-basis不一樣，不是按照比例分配的