VStacks と HStacks をマスターする: SwiftUI で要素を中央に配置する

SwiftUI レイアウトでの複数行のテキストとアイコンの位置合わせ

モジュール式レイアウト技術に重点を置いたフロントエンド UI 開発に SwiftUI を使用します。

import SwiftUI
struct FeatureView: View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack(alignment: .top) {
                Text("Feature 1 with a long description")
                    .frame(maxWidth: .infinity, alignment: .leading)
                Image(systemName: "checkmark.circle")
                    .frame(maxWidth: .infinity, alignment: .center)
                Image(systemName: "xmark.circle")
                    .frame(maxWidth: .infinity, alignment: .center)
            }
            .padding()
            .background(Color.gray.opacity(0.2))
            HStack(alignment: .top) {
                Text("Feature 2")
                    .frame(maxWidth: .infinity, alignment: .leading)
                Image(systemName: "checkmark.circle")
                    .frame(maxWidth: .infinity, alignment: .center)
                Image(systemName: "xmark.circle")
                    .frame(maxWidth: .infinity, alignment: .center)
            }
            .padding()
        }
    }
}
struct FeatureView_Previews: PreviewProvider {
    static var previews: some View {
        FeatureView()
    }
}

柔軟な位置合わせシステムを備えた HStack の実装

SwiftUI の列全体で一貫した配置を維持するアプローチ。

import SwiftUI
struct ProSectionView: View {
    var body: some View {
        VStack(alignment: .leading) {
            ForEach(0..<3, id: \.self) { index in
                HStack(alignment: .firstTextBaseline) {
                    Text("Pro Feature \\(index + 1): Description")
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Image(systemName: index % 2 == 0 ? "checkmark.circle" : "xmark.circle")
                        .frame(maxWidth: .infinity, alignment: .center)
                }
                .padding()
            }
            .background(Color.gray.opacity(0.1))
        }
    }
}
struct ProSectionView_Previews: PreviewProvider {
    static var previews: some View {
        ProSectionView()
    }
}

クロスブラウザーおよび SwiftUI 環境のテスト

さまざまな環境で一貫したレイアウト動作を検証するための単体テスト。

import XCTest
@testable import YourApp
final class LayoutTests: XCTestCase {
    func testAlignmentConsistency() {
        let view = UIHostingController(rootView: FeatureView())
        XCTAssertNotNil(view.view)
    }
    func testBackgroundColors() {
        let view = UIHostingController(rootView: ProSectionView())
        let backgroundColor = view.view.backgroundColor
        XCTAssertEqual(backgroundColor, UIColor.systemGray)
    }
}

SwiftUI レイアウト FAQ: よくある質問への回答

1. SwiftUI の行でテキストとアイコンを整列するにはどうすればよいですか?
2. を組み合わせて使用​​します HStack そして alignment: .top 複数行のテキストであっても要素を整列させます。
3. 1 つのセクションに背景色を追加するにはどうすればよいですか?
4. セクションをラップします。 ZStack そして追加します Rectangle 目的の色を背景として使用します。
5. SwiftUI で動的な行を作成する最良の方法は何ですか?
6. 使用 ForEach データをループして行を動的に生成します。
7. SwiftUI レイアウトをテストするにはどうすればよいですか?
8. ビューをラップする UIHostingController また、単体テストを使用して、レイアウトと視覚的な一貫性を検証します。
9. 親のサイズに基づいてビューを整列できますか?
10. はい、使用します GeometryReader 親寸法にアクセスし、それに応じて子ビューを調整します。

SwiftUI レイアウトに関する最終的な考え

視覚的に一貫したレイアウトを作成する SwiftUI それは芸術であり科学でもあります。次のような強力なツールを使用することで、 ジオメトリリーダー および ZStack を使用すると、開発者はセクション間で動的な位置合わせを確保できます。これらの技術は、複雑な UI に柔軟性と優雅さをもたらします。

「Pro」のようなセクションを構築する場合、視覚的な明瞭さと背景の差別化を組み合わせることで、使いやすさが向上します。これらの原則を適用すると、機能だけでなく視覚的にも魅力的な結果が保証され、デザインが完璧に近づきます。 ✨