🔴Frame

SwiftUI ⟩ Layout ⟩ Frame

🔴 主題

• ideal size

💈範例

• TestFrameView - demo ideal size, min width.

• TestIdealSizeView - test ideal size behaviors.

• TestLittleSquares - demo adaptive layout.

⭐️ 重點

.frame() 只是改變 parent's proposed size，並非改變 child view's size，child view 本身的大小還是由 child view 自己決定❗️(👉 See: TestFrameView)

a view may behave differently on each axis.

• Spacer inside a VStack will probably take all space vertically, but no space horizontally.

• There are cases (e.g. Text) when the behavior in one axis will be affected by the other.

Frame Behaviors

• pull-in views: only take as much space as needed, e.g. HStack/VStack.

• adaptive pull-in views: take only what they need, if offered is not enough, they'll do their best (truncate or wrap) to respect the offered space, e.g. Text.

• push-out views: take all the space offered, e.g. Rectangle.

• Custom views: draw outside the area offered.

📘 手冊

• SwiftUI ⟩ Layout ⟩

  • Laying Out a Simple View

  • .frame(width:height:alignment:)

  • .frame(minWidth:idealWidth:maxWidth ...)

  • fixedSize(), fixedSize(horizontal:vertical:) - fixed ideal size.

  • layoutPriority(_:)

📗 參考

• SwiftUI Lab ⟩ Frame Behaviors with SwiftUI

• Sarun ⟩ Intrinsic content size in SwiftUI ⭐️ - ideal size

👥 相關

• stack

• can be used to align Text . 👉 See: Sarun

• can use .testFrame() to test frame behaviors.

• convenience extensions: .frame()

• can use .dimension() (View extension) to show a view's frame visually.

❓

問：如何製作一個像 Text 一樣的 custom view，可以根據 parent's offered size，調整成緊貼自己內容的 frame❓