ボタンを縦に展開。Swift Playground用。

ビューの展開 (縦).swift

import SwiftUI
import PlaygroundSupport

/// ボタン
struct RoundButton: View {
    /// サイズ
    static let size: CGSize = .init(width: 32, height: 44)

    /// 画像
    let image: Image

    /// テキスト
    let text: LocalizedStringResource

    /// アクション
    let action: () -> Void

    var body: some View {
        VStack {
            Button(action: action, label: { image })
                .frame(width: 32, height: 32)
                .background(.white, in: Circle())
                .shadow(color: .black.opacity(0.2), radius: 1, x: 2, y: 2)
            Text(text)
                .font(.caption)
        }
    }
}

/// プレビュー
struct ContentView: View {
    /// 画面サイズ
    private static let size: CGSize = .init(width: 500, height: 500)

    /// 拡張フラグ
    @State private var isExpanded: Bool = false

    /// デフォルトのボタン位置
    private var defaultButtonPosition: CGPoint {
        .init(x: ContentView.size.width - RoundButton.size.width / 2 - 16, y: ContentView.size.height - RoundButton.size.height / 2 - 16)
    }

    /// 拡張時のボタン位置
    private func expandPosition(line: CGFloat) -> CGPoint {
        .init(x: ContentView.size.width - RoundButton.size.width / 2 - 16, y: ContentView.size.height - (RoundButton.size.height / 2 + 32) * line)
    }

    var body: some View {
        ZStack {
            RoundButton(image: .init(systemName: "a.circle.fill"), text: "1") { print("1") }
                .frame(width: RoundButton.size.width, height: RoundButton.size.height)
                .position(isExpanded ? expandPosition(line: 5) : defaultButtonPosition)
                .opacity(isExpanded ? 1 : 0)
            RoundButton(image: .init(systemName: "b.circle.fill"), text: "2") { print("2") }
                .frame(width: RoundButton.size.width, height: RoundButton.size.height)
                .position(isExpanded ? expandPosition(line: 4) : defaultButtonPosition)
                .opacity(isExpanded ? 1 : 0)
            RoundButton(image: .init(systemName: "c.circle.fill"), text: "3") { print("3") }
                .frame(width: RoundButton.size.width, height: RoundButton.size.height)
                .position(isExpanded ? expandPosition(line: 3) : defaultButtonPosition)
                .opacity(isExpanded ? 1 : 0)
            RoundButton(image: .init(systemName: "d.circle.fill"), text: "4") { print("4") }
                .frame(width: RoundButton.size.width, height: RoundButton.size.height)
                .position(isExpanded ? expandPosition(line: 2) : defaultButtonPosition)
                .opacity(isExpanded ? 1 : 0)
            RoundButton(image: .init(systemName: "chevron.up.circle"), text: "base") {
                withAnimation {
                    isExpanded.toggle()
                }
            }
            .frame(width: RoundButton.size.width, height: RoundButton.size.height)
            .position(defaultButtonPosition)
        }
        .frame(width: ContentView.size.width, height: ContentView.size.height)
    }
}

PlaygroundPage.current.setLiveView(ContentView())