@Chronos2500 (くろのす)posted at 2024-10-23

SwiftUIでLabelのアイコンを揃えられない

Q&A

UIKit SwiftUI SFSymbols

解決したいこと

SwiftUIで横長のSF Symbolsと正方形なSF Symbolsが混ざっているとき、綺麗に整列させる方法が分かりません。(Labelを使っても良いです)

シンボルの大きさはそのままに、シンボルの中心を揃え、テキストの先頭も揃える感じにしたいです

ただしframeで固定させるのは拡大縮小に対応出来ないのと汎用性がないので避けたいです。

現在のコード

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "pencil")
                Text("This is Text")
                Spacer()
            }
            HStack {
                Image(systemName: "folder")
                Text("This is Text")
                Spacer()
            }
        }
    }
}

自分で試したこと

Formの中でLabelを使うと目的のビューになるようです👇　ただ今回はFormを使いたくないです...

1Answer

@nak435 posted at 2024-10-23

簡単なのは、widthを指定することだと思います。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "pencil")
+                   .frame(width: 24)
                Text("This is Text")
                Spacer()
            }
            HStack {
                Image(systemName: "folder")
+                   .frame(width: 24)
                Text("This is Text")
                Spacer()
            }
        }
    }
}

0Like

Comments

@nak435

ただしframeで固定させるのは拡大縮小に対応出来ないのと汎用性がないので避けたいです。

frameがいやなら、

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Image(systemName: "pencil")
                Image(systemName: "folder")
            }
            VStack {
                Text("This is pencil")
                Text("This is folder")
            }
        }
    }
}

とか。

@Chronos2500
Questioner
回答ありがとうございます
無理やりFormに入れるか、frameを@ScaledMetricで設定するカスタムビューを作ろうかと思っています
Appleが標準のLabelで対応してくれれば良いのですが...(願望)

@nak435

ちょっと長いですが、↓こういうのもあります。
（iconの最大幅に合わせます）

struct ContentView: View {
    @State private var iconWidth: CGFloat = 20
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "pencil")
                    .background {
                        GeometryReader { geo in
                            Color.clear.preference(key: IconWidthPreferenceKey.self, value: geo.size.width)
                        }
                    }
                    .frame(width: iconWidth)
                Text("This is Text")
                Spacer()
            }
            HStack {
                Image(systemName: "folder")
                    .background {
                        GeometryReader { geo in
                            Color.clear.preference(key: IconWidthPreferenceKey.self, value: geo.size.width)
                        }
                    }
                    .frame(width: iconWidth)
                Text("This is Text")
                Spacer()
            }
        }
        .onPreferenceChange(IconWidthPreferenceKey.self) { value in
            self.iconWidth = value
        }
    }
}

private extension ContentView {
    struct IconWidthPreferenceKey: PreferenceKey {
        static let defaultValue: CGFloat = 0
        static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
}

@Chronos2500
Questioner
これもまたありがとうございます！

Are you sure you want to delete the question?