bugfix> ios > 投稿

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

回答 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)
    }
    
    

あなたの答え