Questions about RGBBullsEye on macOS

📚 Official Books SwiftUI by Tutorials
1

I reference your code and running on macOS.
Could I just ask your some questions?

Q1)How do I force divide content view width in half?
Q2)How do I place the circle on the rightmost in green area?
Q3)How do I avoid a gap between green area and red area?

thx

Screen Shot 2022-04-21 at 9.57.29 AM

struct CircleRGB: View {
    @Binding var rgb: RGB
    var body: some View {
        HStack {
            Circle()
                .fill(Color(rgb: self.rgb))
                .frame(maxWidth: .infinity, alignment: .trailing)
                .border(.green)
                
            VStack {
                Text("R: \(self.rgb.red)")
                Text("G: \(self.rgb.green)")
                Text("B: \(self.rgb.blue)")
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .border(.red)
        }
        .padding()
        .border(.yellow)
    }
}
2

hi diuming,

  1. use GeometryReader (chapter 13)
  2. use Spacer() (chapter 7)
  3. use HStack(spacing: 0). You can also use a negative spacing value
3

Hi Audrey,
thanks for reply.

referring your advice

  1. I will try it soon.
  2. It’s no effect.
  3. It works very well.

Maybe I should have read all chapters and then ask questions.

    var body: some View {
        HStack(spacing: 0) {
            HStack {
                Spacer()
                Circle()
                    .fill(Color(rgb: self.rgb))
                    .frame(maxWidth: .infinity, alignment: .trailing)
            }
            .border(.green)

            VStack {
                Text("R: \(self.rgb.red)")
                    .frame(maxWidth: .infinity, alignment: .leading)
                Text("G: \(self.rgb.green)")
                    .frame(maxWidth: .infinity, alignment: .leading)
                Text("B: \(self.rgb.blue)")
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
            .border(.red)
        }
        .padding()
        .border(.yellow)
    }
5

strange that Spacer() doesn’t work. Try this:

HStack {
  HStack {
    Rectangle()
      .fill(Color(.clear))
    Circle()
      .fill(Color(rgbStruct: self.rgb))
  }
  .frame(maxWidth: .infinity)
  .border(.green)
// ...
6

The circle is moved to right, but not rightmost.
thanks.