和葛麗絲的 wiki page 一樣，我們做一個按鈕，來把格言彈出來。

在 ClockContainerView，我們已經將每個 button 抽出來，所以這個格言的 button，也是一樣做法。

先放一個要不要 present 的狀態

@State private var isShowingGraceQuote = false

再做出 button

private var quotePageButton: some View {
    Button {
      
      isShowingGraceQuote.toggle()
    } label: {
      Image(systemName: "quote.bubble")
        .font(.system(size: 50))
        .foregroundColor(.black)
    }
    .sheet(isPresented: $isShowingGraceQuote) {
      CounterClockwiseQuote()
    }
  }

然後，再把 button 放進 HStack 就完成了

VStack {
        HStack {
          Spacer()
          quotePageButton
          wikiProfileButton
          settingButton
            .padding(.trailing, 5)
        }
        Spacer()
      }

完成後用 preview 確認能不能發動 sheet present

不過 SwiftUI 的特點，應該大量的發揮，讓 View 就像樂高一樣，一塊一塊的組合起來。這個版面，只放一個圓形鐘有點空，我們在鐘的下方，放一樣的格言。

整個程式碼如下

//
//  ClockContainerView.swift
//  DemoBackwardsClock
//
//

import SwiftUI

struct ClockContainerView: View {
  
  var width: CGFloat = 200
  var height: CGFloat = 200
  
  @StateObject private var clockwork: Clockwork = .init()
  
  @State private var dialColor: Color = .white
  
  @State private var isShowingGraceQuote = false
  
  @State private var isShowingGraceWikiSheet = false
  
  @State private var isShowingColorPicker = false
  
  private let graceWikiPageURL = "https://en.wikipedia.org/wiki/Grace_Hopper"
  
  private let angleUtility: AngleUtility = .init()
  
  var body: some View {
    ZStack {
      
      VStack {
        HStack {
          Spacer()
          quotePageButton
          wikiProfileButton
          settingButton
            .padding(.trailing, 5)
        }
        Spacer()
      }
      
      Group {
        ClockDialView(dialColor: $dialColor)
        HandShape(handLength: .hour)
          .fill(Color.blue)
          .rotationEffect(Angle(degrees: clockwork.hourAngle))
        HandShape(handLength: .minute)
          .fill(Color.cyan)
          .rotationEffect(Angle(degrees: clockwork.minuteAngle))
        HandShape(handLength: .second)
          .fill(Color.red)
          .rotationEffect(Angle(degrees: clockwork.secondAngle))
        Circle()
          .fill(Color.orange)
          .frame(width: 20, height: 20, alignment: .center)
      }
      .frame(width: width, height: height, alignment: .center)
      .offset(x: 0, y: -180)
      
      CounterClockwiseQuote()
        .frame(width: 250, height: 450, alignment: .center)
        .offset(x: 0, y: 150)
    }
  }
  
  private var quotePageButton: some View {
    Button {
      
      isShowingGraceQuote.toggle()
    } label: {
      Image(systemName: "quote.bubble")
        .font(.system(size: 50))
        .foregroundColor(.black)
    }
    .sheet(isPresented: $isShowingGraceQuote) {
      CounterClockwiseQuote()
    }
  }
  
  /// 將 wiki profile button 抽出
  private var wikiProfileButton: some View {
    Button {
      
      isShowingGraceWikiSheet.toggle()
    } label: {
      Image(systemName: "person.crop.circle")
        .font(.system(size: 50))
        .foregroundColor(.black)
    }
    .sheet(isPresented: $isShowingGraceWikiSheet) {
      BCWebView(urlString: graceWikiPageURL)
    }
  }
  /// 將設定按鈕抽出
  private var settingButton: some View {
    
    Button {
      
      isShowingColorPicker.toggle()
    } label: {
      Image(systemName: "gearshape.circle")
        .font(.system(size: 50))
        .foregroundColor(.black)
    }
    .sheet(isPresented: $isShowingColorPicker) {
      ColorPickerContainerView(dialColor: $dialColor)
    }
  }
}

struct ClockContainerView_Previews: PreviewProvider {
  static var previews: some View {
    ClockContainerView()
  }
}