Spacer & Dividers
LayoutThree layout utility views: TTBaseSUISpacer — a colored flexible spacer, TTBaseSUIHorizontalDividerView — a horizontal line or space divider with 3 types, and TTBaseSUIVerticalDivider for column separators.
↔️ TTBaseSUISpacer
Unlike SwiftUI's built-in Spacer, TTBaseSUISpacer is a Rectangle with background color and corner radius. Useful when you need a visible separator that also flexes.
// Flexible spacer (expands in available axis)
TTBaseSUISpacer()
// Fixed height spacer (no color)
TTBaseSUISpacer(maxHeight: 20)
// Colored flexible spacer
TTBaseSUISpacer(withBg: .green.opacity(0.2), radius: 8.0)
// Fixed-width colored spacer in HStack
HStack {
LeftView()
TTBaseSUISpacer(withBg: .gray.opacity(0.2), radius: 8, maxWidth: 20)
RightView()
}
// Fill remaining height in VStack
VStack {
TopView()
TTBaseSUISpacer(withBg: .clear, radius: 0) // Fills remaining space
BottomView()
}
➖ TTBaseSUIHorizontalDividerView
| TYPE | Description |
|---|---|
.LINE | 1px line using lineDefColor |
.SPACE | Transparent space of height P_CONS_DEF |
.CUSTOME(color:height:) | Fully custom color and height |
// Standard separator line
TTBaseSUIHorizontalDividerView(noConner: .LINE)
// Space gap (uses P_CONS_DEF height)
TTBaseSUIHorizontalDividerView(noConner: .SPACE)
// Custom divider
TTBaseSUIHorizontalDividerView(
noConner: .CUSTOME(color: .systemBlue.opacity(0.3), height: 2)
)
// With corner radius
TTBaseSUIHorizontalDividerView(
withConner: 4,
type: .CUSTOME(color: .systemRed, height: 3)
)
Pro Tip: Use
TTBaseSUIHorizontalDividerView(noConner: .SPACE) instead of Spacer().frame(height: x) inside TTBaseSUIVStack when you want consistent spacing that follows the TTBaseUIKit config system rather than hardcoded values.