Stacks

#vstack #hstack #zstack #lazystack #lazyvstack #lazyhstack #customcontainer #gridstack

Overview

Here the sorting of the code is crucial The latter overrides the former For example: if you define the colour after the Text, because the latter one will override it, it cannot be seen

VStack

HStack

ZStack

Arranges the items in depth and Overlaps the them.

Zstack aynı zamanda bir menünün üzerine ek bir sabit buton koymak için de kullanılıyor.

LazyStack

Standart Stacks loads the data immediately but LazyStacks (LazyVStack, LazyHStack) loads the data on demand.

You only add "Lazy" word to the regular stacks and they work the same.

But there is one particular difference is that, LazyStacks use the whole layout (full size height&width) where regular stacks use only the area they needed (they will fit the area). Because regular stacks load the data in advance thus they know how much area they need, but since Lazy Stacks don't load the data in advance they cannot calculate how much area they needed so they take all the area available.

GridStack

Building a stack of cards (HWS)

extension View {
    func stacked(at position: Int, in total: Int) -> some View {
        let offset = Double(total - position)
        return self.offset(x: 0, y: offset * 10)
    }
}
// position: where is the card
// total: how many cards

Sources

Videos

Articles / Documents

Last updated