SwiftUI中Link内上下排列的Text视图无法靠左显示如何解决

问题根因 #

• 你代码中Link视图内部默认没有设置子元素的对齐规则，同时外层的VStack也没有指定对齐方向，SwiftUI默认会将子元素居中排列，因此两个文本会整体居中，无法靠左侧展示。

解决方案 #

在Link内部新增一个设置了左对齐的VStack，同时给容器设置最大宽度撑满父视图，内容靠左对齐即可，修改后的代码如下：

struct ResourceItem: View {
    
    var title: String
    var url: String
    
    var body: some View {
        VStack {
            Link(destination: URL(string: url)!) {
                // 内部VStack设置左对齐，可自定义spacing调整两行文本的上下间距
                VStack(alignment: .leading, spacing: 4) {
                    Text(title)
                        .bold()
                        .font(.system(size: 18))
                    
                    Text(url)
                        .bold()
                        .foregroundColor(.gray)
                }
                // 让Link内容撑满父容器宽度，整体靠左
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        // 外层容器也撑满父宽度，保证整个组件内容靠左
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

内容的提问来源于stack exchange，提问作者George Sepetadelis