Make Equal-Width SwiftUI Views in List Rows : <p>I have a <code>List</code> that displays days in the current month. Each row in the <code>List</code> contains the abbreviated day, a <code>Divider</code>, and the day number within a <code>VStack</code>. The <code>VStack</code> is then embedded in an <code>HStack</code> so that I can have more text to the right of the day and number.</p>

<pre class="lang-swift prettyprint-override"><code>struct DayListItem : View {

    // MARK: - Properties

    let date: Date

    private let weekdayFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "EEE"
        return formatter
    }()

    private let dayNumberFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "d"
        return formatter
    }()

    var body: some View {
        HStack {
            VStack(alignment: .center) {
                Text(weekdayFormatter.string(from: date))
                    .font(.caption)
                    .foregroundColor(.secondary)
                Text(dayNumberFormatter.string(from: date))
                    .font(.body)
                    .foregroundColor(.red)
            }
            Divider()
        }
    }

}
</code></pre>

<p>Instances of <code>DayListItem</code> are used in <code>ContentView</code>:</p>

<pre class="lang-swift prettyprint-override"><code>struct ContentView : View {

    // MARK: - Properties

    private let dataProvider = CalendricalDataProvider()

    private var navigationBarTitle: String {
        let formatter = DateFormatter()
        formatter.dateFormat = "MMMM YYY"
        return formatter.string(from: Date())
    } 

    private var currentMonth: Month {
        dataProvider.currentMonth
    }

    private var months: [Month] {
        return dataProvider.monthsInRelativeYear
    }

    var body: some View {
        NavigationView {
            List(currentMonth.days.identified(by: \.self)) { date in
                DayListItem(date: date)
            }
                .navigationBarTitle(Text(navigationBarTitle))
                .listStyle(.grouped)
        }
    }

}
</code></pre>

<p>The result of the code is below:</p>

<p><a href="https://i.stack.imgur.com/5notv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5notv.png" alt="Screenshot of app running in Xcode Simulator"></a></p>

<p>It may not be obvious, but the dividers are not lined up because the width of the text can vary from row to row. What I would like to achieve is to have the views that contains the day information be the same width so that they are visually aligned.</p>

<p>I have tried using a <code>GeometryReader</code> and the <code>frame()</code> modifiers to set the minimum width, ideal width, and maximum width, but I need to ensure that the text can shrink and grow with Dynamic Type settings; I chose not to use a width that is a percentage of the parent because I was uncertain how to be sure that localized text would always fit within the allowed width.</p>

<p>How can I modify my views so that each view in the row is the same width, regardless of the width of text?</p>

<p>Regarding Dynamic Type, I will create a different layout to be used when that setting is changed.</p>
