制作帶有內陰影的 UI，如 Android 和 iOS (SwiftUI) 的照片所示

Question

我正在嘗試構建一個應用程序，並希望構建一個具有內陰影效果的視圖，如圖所示。 我想在 Android 和 iOS (SwiftUI) 中做到這一點。

Answer 1

現在，在 SwiftUI 中，可以僅對選定和非選定狀態使用不同的圖像。

這是執行此操作的方法的演示

struct TestSelectedTabs: View {
    @State var selectedTab = 1
    var body: some View {
        TabView(selection: $selectedTab){
            Text("One")
                .tabItem {
                    Image(systemName: selectedTab == 0 ? "printer.fill" : "printer")
                    Text("Print")
                }.tag(0)
            Text("Two")
                .tabItem {
                    Image(systemName: selectedTab == 1 ? "tv.fill" : "tv")
                    Text("Show")
                }.tag(1)
        }
    }
}

所以有兩組圖標（平面和壓入）可以達到所需的效果。 或者，當然，您可以在代碼中生成具有所需“按下”效果的圖像，例如使用 CoreGraphics、Layer 等，但最終它需要只是圖像。

Answer 2

好吧，您可以創建一個帶有該特定陰影的自定義背景，然后只要用戶按下按鈕就可以更改按鈕的背景以反映陰影背景，並且由於它是自定義的，因此您可以根據自己的喜好進行形狀和深度也喜歡。

您通常會保持圖標/按鈕平坦，對嗎？ 然后當按下/選擇/激活時，只需將背景更改為此，以強調它被選中。

這與上述答案中的方法幾乎相似。