swiftUI 中的按鈕上未顯示 SF 符號

Question

我是 IOS 開發人員的新手，這是我的第一天。 所以我一直在玩 SF 符號並嘗試將其添加到按鈕中，但不知何故它沒有出現在按鈕上

錯誤

顏色應該是黑色的，它應該出現在按鈕上。 也許我犯了一個初學者的錯誤，但仍然不知道如何解決它。 所以我做錯了什么？

struct ButtonBig: View {
    var ButtonText:String
    var ButtonIcon:String
    var body: some View {
        ZStack{
        RoundedRectangle(cornerRadius: 25.0)
            .frame(width:117, height: 112.36, alignment:.center)
            .foregroundColor(.blue)
            VStack{
                Image(systemName: ButtonIcon).padding()
                Text(ButtonText).foregroundColor(.white)
            }
        }
    }
}
}

Button(action: ) {
                        ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
                    }

Answer 1

將按鈕樣式添加到PlainButtonStyle()

Button(action: ) {
    ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
}.buttonStyle(PlainButtonStyle()) //<-- Here

或者您可以將renderingMode 模式設置為原始模式。

// Other code
VStack{
    Image(systemName: ButtonIcon).renderingMode(.original).padding() //<--- Here
    Text(ButtonText).foregroundColor(.white)
}
// Other code

Answer 2

您可以通過在RoundedRectangle形狀視圖上覆蓋按鈕圖像和文本來做到這一點，如下所示：

struct ButtonBig: View {

    var ButtonText:String
    var ButtonIcon:String

    var body: some View {

        ZStack {

            RoundedRectangle(cornerRadius: 25.0)
                .frame(width:117, height: 112.36, alignment:.center)
                .foregroundColor(.blue)
                .overlay(
                    VStack{
                        Image(systemName: ButtonIcon).renderingMode(.original).padding()
                        Text(ButtonText).foregroundColor(.white)
                    }
                 )
        }
    }
}

或者您也可以通過將按鈕樣式直接設置為按鈕的HStack來實現。

HStack {
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button1",ButtonIcon: "calendar")
       })
                
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button2",ButtonIcon: "calendar")
       })
                
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
       })

}.buttonStyle(PlainButtonStyle()) //Set the button style to HStack instead of each button