Как удалить белую рамку в моем приложении SwiftUI?

Question

Я изучаю Swift, и мое первое назначение - создать интерфейс, похожий на идентификационную карточку сотрудника.

//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .border(Color.red, width: 0)
            Color.red
                .edgesIgnoringSafeArea(.all)
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

employeeID - это просто картинка, которую я взял с Google Images для тестирования.

Моя цель состоит в том, чтобы пользовательский интерфейс выглядел как

https://www.behance.net/gallery/28292701/Cool-Office-Badge-for-team-mates

Answer 1

Вы можете добавить ZStack с background и image внутри.

        ZStack (alignment: .top){
            Color.red
                .edgesIgnoringSafeArea(.all)
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .border(Color.red, width: 0)
                .fixedSize()
        }

Если вы хотите добавить имя / заголовок в представление, оберните Image в a VStack и добавьте текст.

Результат: