はじめに

先日SwiftUIのLinkを使用した際に、複数行の要素を左寄せ(=alignmentをleft)にしたかったのですが、少し実装に苦戦したので備忘録です。

以下のキャプチャの、1枚目の状態から2枚目の状態にする為の実装方法について書きます。URLが左寄せになっています。

上手くいかなかった方法

まず思い浮かぶのは下記の様にHStackを使う方法ですが、こちらでは上手く動作しません。

HStack {
   Link(url.absoluteString, destination: url)
   Spacer()
}

こちらも似た方法ですが上手くいきません。

Link(destination: url, label: {
    HStack {
        Text(url.absoluteString)
        Spacer()
    }
})

VStackにalignmentとして.leadingを指定する方法も思いつきましたが、こちらも上手くいきません。
単純なTextならこれでも上手く動作しますが、Linkは上手く動作しませんでした。SwiftUIは難しい...。

VStack(alignment: .leading) {
    Link(url.absoluteString, destination: url)
}

multilineTextAlignmentを使うと上手く期待通りの表示になりました！！！
iOS13から使えるのもうれしいポイントです。

Link(destination: url, label: {
    Text(url.absoluteString)
        .multilineTextAlignment(.leading)
})

私はSwiftUIを勉強し始めたばかりなので、より良い書き方があればお気軽にコメントで教えてください。
さいごに、私がリリースしたSwiftUIのアプリの宣伝をさせてください。