Spacer & Dividers

Layout

Three 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

TYPEDescription
.LINE1px line using lineDefColor
.SPACETransparent 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.