web-dev-qa-db-ja.com

SwiftUIでビューを水平方向に中央揃え

View内のImage（HStack）を水平方向に中央揃えするにはどうすればよいですか？ボタンを左揃えにし、画像をビューの水平方向の中央に配置したい。

現在私はこの構造を持っています：

VStack {
        HStack {
            Button(action: {
                print("Tapped")
            }, label: {
                Image("left-arrow")
                    .resizable()
                    .frame(width: 30, height: 30, alignment: .leading)
            }).padding(.leading, 20)

            Spacer()

            Image("Twitter-logo")
                .resizable()
                .frame(width: 30, height: 30, alignment: .center)

        }
        Spacer()
    }

これは私にこれを与えています：

enter image description here

しかし、私はこれを達成したいです：

enter image description here

更新：

enter image description here

iosswiftxcodeuser-interfaceswiftui
9
jsbeginnerNodeJS

ボタンサイズをプロパティに保存し、画像に負のパディングを追加するのはどうですか？画像の後にある追加のスペーサーに注意してください。

struct ContentView: View {

    var buttonSize: Length = 30

    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    print("Tapped")
                }, label: {
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: buttonSize, height: buttonSize, alignment: .leading)
                })
                Spacer()
                Image(systemName: "star")
                    .resizable()
                    .frame(width: 30, height: 30, alignment: .center)
                    .padding(.leading, -buttonSize)
                Spacer()
            }
            Spacer()
        }
    }
}

結果：

enter image description here

6
Artem Novichkov

2つのHStackをZStackに埋め込み、それに応じてスペーサーを水平方向の間隔に配置できます。これらすべてをVStackにSpacer()で埋め込んで、すべてを上に押し上げます。

_struct ContentView : View {
var buttonSize: Length = 30
var body: some View {
    VStack {
        ZStack {
            HStack {
                Button(action: {

                }, label: {
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: CGFloat(30), height: CGFloat(30), alignment: .leading)
                }).padding(.leading, CGFloat(20))

                Spacer()
            }

            HStack {
                Image(systemName: "star")
                    .resizable()
                    .frame(width: CGFloat(30), height: CGFloat(30), alignment: .center)
            }
        }
        Spacer()
    }
}
_

}

注：2番目のHStackでは、画像は自動的に中央揃えになりますが、そうでない場合は、画像の前後にSpacer()を配置できます。

編集：VStackとSpacer()を追加して、必要なOPのようにすべてを最上部に移動しました。

編集2：画像が中心からわずかにオフセットされるため、画像のパディングを削除しました。独自のHStackであり、中央揃えであるため、パディングは必要ありません。

編集3：コメントの@Chris Princeのおかげで、左、中央、および右の引数を提供してOPが望む効果を作成できるシンプルなNavigationBar風のカスタムビューを作成することにしました（各ビューのセットが整列されています）互いに独立して）：

_struct CustomNavBar<Left, Center, Right>: View where Left: View, Center: View, Right: View {
    let left: () -> Left
    let center: () -> Center
    let right: () -> Right
    init(@ViewBuilder left: @escaping () -> Left, @ViewBuilder center: @escaping () -> Center, @ViewBuilder right: @escaping () -> Right) {
        self.left = left
        self.center = center
        self.right = right
    }
    var body: some View {
        ZStack {
            HStack {
                left()
                Spacer()
            }
            center()
            HStack {
                Spacer()
                right()
            }
        }
    }
}
_

使用方法：

_struct ContentView: View {
    let buttonSize: CGFloat = 30
    var body: some View {
        VStack {
            CustomNavBar(left: {
                Button(action: {
                    print("Tapped")
                }, label: {
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: self.buttonSize, height: self.buttonSize, alignment: .leading)
                }).padding()
            }, center: {
                Image(systemName: "star")
                    .resizable()
                    .frame(width: 30, height: 30, alignment: .center)
            }, right: {
                HStack {
                    Text("Long text here")
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                        .padding(.trailing)
                }.foregroundColor(.red)
            })
            Spacer()
            Text("Normal Content")
            Spacer()
        }
    }
}
_

Example code shown on simulator

9
RPatel99

あなたは位置プロパティを使用してビューを中央に配置しますこのコードを試してください

Group{ // container View
   Image("Twitter-logo")
            .resizable()
            .frame(width: 30, height: 30, alignment: .center)
}.position(x: UIScreen.main.bounds.width/2)
0
kishor soneji