WidgetKit 如何在带文字的Link组件内添加指定锁图标？

你可以直接将Link的自定义视图部分替换为HStack横向容器，同时放入锁图标和文本即可实现图文并排的效果，完整代码如下：

Link(destination: URL(string: "xxxx")!) {
    HStack(spacing: 6) {
        // 替换为你锁图标素材在Assets catalog中的命名
        Image("lock_icon")
            .resizable()
            .renderingMode(.template)
            .frame(width: 12, height: 12)
        Text("Lock")
            .font(.caption)
    }
    .foregroundColor(.white)
    .padding(EdgeInsets(top: 10, leading: 12, bottom: 10, trailing: 12))
    .background(Color.gray)
    .cornerRadius(15)
}

参数调整说明 #

• 调整HStack的spacing数值可以修改图标和文本之间的间距
• 调整Image的frame数值可以修改锁图标的展示尺寸
• 如果你的图标素材本身已经是白色不需要适配tint颜色，可以删除renderingMode(.template)属性

内容的提问来源于stack exchange，提问作者Erik Auranaune