Question

如何将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()
    }

这是给我的：

但我想实现这一目标：

更新：

Answer 1

将按钮大小保存到属性并向图像添加负填充是什么？并在图像后注意额外的间隔物。

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()
        }
    }
}

结果：

Answer 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()
    }
}

}

注意：在第二个HStack中，图像应自动居中对齐，但如果不对齐，则可以在图像前后放置Spacer()。

编辑：添加了VStack和Spacer()，可以将所有内容移动到所需的OP顶部。

编辑2：删除了图像上的填充，因为它导致图像稍微偏离中心。由于它是独立的HBox并且居中对齐，因此不需要填充。

Answer 3

您可以使用position属性使视图居中

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

Answer 4

对我来说最简单的方法：

ZStack(){
    HStack{
        Image("star").resizable().foregroundColor(.white).frame(width: 50, height: 50)
        Spacer()
    }
        Image("star").resizable().font(.title).foregroundColor(.white).frame(width: 50, height: 50)
}

在SwiftUI中水平居中查看

4 个答案: