title: SwiftUI: Horizontally Align Views Inside a List
body: <p>I'm trying to get items inside a list to line up in a specific way.</p>
  
  <pre><code>List {
      HStack {
          Text("1.")
          Text("Item 1")
      }
  
      HStack {
          Text("Item 2")
      }
  }
  </code></pre>
  
  <p>That winds up looking like this:</p>
  
  <pre><code>1. Item 1
  Item 2
  </code></pre>
  
  <p>What I'd <em>like</em> is to line up, in this example, "Item 1" and "Item 2":</p>
  
  <pre><code>1.  Item 1
      Item 2
  </code></pre>
  
  <p>That is, the "item" parts all line up whether they have a list marker or not, or if they have list markers of different lengths (number 1. lines up with 100.)</p>
  
  <p>I tried <a href="https://www.hackingwithswift.com/books/ios-swiftui/how-to-create-a-custom-alignment-guide" rel="nofollow noreferrer">making a custom alignment guide as seen here</a> but these don't seem to be respected inside a <code>List</code> --- it works fine if I make the <code>AlignmentGuide</code> and put it all in a <code>VStack</code>, but I need list behavior.</p>
  
  <p>(I could fake this by getting rid of the <code>HStacks</code> and doing <code>Text("1.\tItem 1")</code> and <code>Text("\tItem 2")</code>. The tab stops would make everything line up, but I need to apply different formatting to the list marker and the list item (bolding, color, etc.), so they need to be discrete <code>Text</code> elements.)</p>
  
  <p>Any ideas would be appreciated.</p>