Design and build apps for watchOS 10

// This is an example of using scene padding to position a Circle according
// to the Dial layout grid
struct DialBasedView: View {
    var body: some View {
        ZStack {
            // Add a view to make the ZStack fill the available width, allowing the
            // Circle to position correctly. As an example, we use a rectangle.
            Rectangle()
                .foregroundStyle(Color.clear)

            // Use .scenePadding(.horizontal) on the dial to get the correct
            // width. In a ZStack with centered alignment, it is correctly
            // positioned.
            Circle()
                .foregroundStyle(Color.red)
                .scenePadding(.horizontal)
        }
        // Ignore vertical safe areas to allow the view to draw into the bottom
        // safe areas. This achieves the centering for the dial.
        .edgesIgnoringSafeArea(.vertical)
    }
}