HStack

Part of the Introduction to SwiftUI section of Coddy's Swift journey. Lesson 10 of 50.

HStack arranges views from left to right:

HStack {
    Image(systemName: "sun.max.fill")
        .foregroundStyle(.yellow)
    Text("Sunny")
}

Stacks can be nested. A common layout is a VStack of rows, where each row is an HStack:

VStack {
    HStack {
        Text("Coffee")
        Text("$3")
    }
    HStack {
        Text("Tea")
        Text("$2")
    }
}

Challenge

Easy

Build a weather row: an HStack with the cloud.sun.fill symbol followed by the text Partly cloudy.

Try it yourself

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction to SwiftUI

1Introduction

4Modifiers

7Lists

10Project - Coddy Coffee

2Showing Content

5State & Buttons

8Navigation

11Final Challenges

3Stacks & Layout

6User Input

9Sharing Data

Practice on your own: Swift playground