Question

我一直在尝试制作SwiftUI视图，但是在做一些可以很容易地用约束来完成的事情时遇到了麻烦。我的观点应该是这样

看起来像这样

如何在没有约束的情况下使它们与侧面对齐？这是我针对此视图的代码

private var toolsBottomView: some View {
    ScrollView(.vertical, showsIndicators: false) {
        VStack(spacing: 20) {
            ForEach(0..<AppTools.allCases.count) { index in
                ZStack(alignment: .leading) {
                    RoundedRectangle(cornerRadius: 16)
                        .frame(height: 116)
                        .foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
                    HStack(alignment: .center, spacing: 0) {
                        Spacer().frame(width: 20)
                        VStack(alignment: .leading) {
                            Image("\(AppTools.allCases[index])").resizable().frame(width: 27, height: 27)
                            Text(AppTools.allCases[index].rawValue)
                                .font(.custom("AvenirNextCyr-Demi", size: 24))
                            Text(AppTools.allCases[index].subtitles)
                                .font(.custom("AvenirNextCyr-Demi", size: 12))
                                .foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
                        }.foregroundColor(.white)
                        Button("+", action: {
                            self.currentSelectedTool = AppTools.allCases[index]
                            self.showToolView.toggle()
                        })
                            .font(.custom("AvenirNextCyr-Demi", size: 20))
                            .frame(width: 48, height: 48)
                            .background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)).cornerRadius(24))
                            .foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
                    }
                    .frame(minWidth: 0, maxWidth: .infinity)
                    
                }
            }
            Spacer()
        }
    }.offset(y: 15).padding()
}

Answer 1

将Spacer放在要保留的元素之间，例如

HStack(alignment: .center, spacing: 0) {
    VStack(alignment: .leading) {
        Image("\(AppTools.allCases[index])").resizable().frame(width: 27, height: 27)
        Text(AppTools.allCases[index].rawValue)
            .font(.custom("AvenirNextCyr-Demi", size: 24))
        Text(AppTools.allCases[index].subtitles)
            .font(.custom("AvenirNextCyr-Demi", size: 12))
            .foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
    }.foregroundColor(.white)
    .padding(.leading)

    Spacer()          // << here !!

    Button("+", action: {
        self.currentSelectedTool = AppTools.allCases[index]
        self.showToolView.toggle()
    })
        .font(.custom("AvenirNextCyr-Demi", size: 20))
        .frame(width: 48, height: 48)
        .background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)).cornerRadius(24))
        .foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
    .padding(.trailing)
}

如何将Hstack内部的视图与相对侧对齐？

1 个答案: