画面に図形を表示するには GeometryReaderとPath

(4) 画面に図形を表示するには
(4.1) 四角を表示、大きさはおまかせ
struct ContentView : View {
var body: some View {
VStack {
  Text("Hello There!")
  Rectangle().fill(Color.blue)
}.frame(width: 150, height: 100).border(Color.black)
}
}
(4.2) 四角を表示、元の表示場所から右に+5外れて大きさを半分に
struct ContentView : View {
var body: some View {
VStack {
  Text("Hello There!")
  GeometryReader { geometry in
    Rectangle()
    .path(in: CGRect(
       x: geometry.size.width + 5,
       y: 0,
       width: geometry.size.width / 2.0,
       height: geometry.size.height / 2.0))
    .fill(Color.blue)
  }
}.frame(width: 150, height: 100).border(Color.black)
}
}
 
(4.3) 関数にした
struct ContentView : View {
var body: some View {
VStack {
  Text("Hello There!")
  MyRectangle()
}.frame(width: 150, height: 100).border(Color.black)
}
}
 
struct MyRectangle: View {
var body: some View {
GeometryReader { geometry in
  Rectangle()
  .path(in: CGRect(
    x: geometry.size.width + 5,
    y: 0,
    width: geometry.size.width / 2.0,
    height: geometry.size.height / 2.0))
  .fill(Color.blue)
  }
}
}
 
(4.4) 自由な形を表示
struct ContentView : View {
var body: some View {
HStack {
  Text("SwiftUI")
  .foregroundColor(.black).font(.title).padding(15)
  .background(RoundedCorners(color: .green, tr: 30, bl: 30))
  Text("Lab")
  .foregroundColor(.black).font(.title).padding(15)
  .background(RoundedCorners(color: .blue, tl: 30, br: 30))
} // HStack
.padding(20).border(Color.gray).shadow(radius: 3)
} // some View
} // View
 
struct RoundedCorners: View {
var color: Color = .black
var tl: CGFloat = 0.0
var tr: CGFloat = 0.0
var bl: CGFloat = 0.0
var br: CGFloat = 0.0
var body: some View {
GeometryReader { geometry in
Path { path in
  let w = geometry.size.width
  let h = geometry.size.height
  // We make sure the redius does not exceed the bounds dimensions
  let tr = min(min(self.tr, h/2), w/2)
  let tl = min(min(self.tl, h/2), w/2)
  let bl = min(min(self.bl, h/2), w/2)
  let br = min(min(self.br, h/2), w/2)
  path.move(to: CGPoint(x: w / 2.0, y: 0))
  path.addLine(to: CGPoint(x: w - tr, y: 0))
  path.addArc(
    center: CGPoint(x: w - tr, y: tr),
    radius: tr,
    startAngle: Angle(degrees: -90),
    endAngle: Angle(degrees: 0),
    clockwise: false)
  path.addLine(to: CGPoint(x: w, y: h - br))
  path.addArc(
    center: CGPoint(x: w - br, y: h - br),
    radius: br,
    startAngle: Angle(degrees: 0),
    endAngle: Angle(degrees: 90),
    clockwise: false)
  path.addLine(to: CGPoint(x: bl, y: h))
  path.addArc(
    center: CGPoint(x: bl, y: h - bl),
    radius: bl,
    startAngle: Angle(degrees: 90),
    endAngle: Angle(degrees: 180),
    clockwise: false)
  path.addLine(to: CGPoint(x: 0, y: tl))
  path.addArc(
    center: CGPoint(x: tl, y: tl),
    radius: tl,
    startAngle: Angle(degrees: 180),
    endAngle: Angle(degrees: 270),
    clockwise: false)
} // Path
.fill(self.color)
} // GeometryReader
} // some View
} // View