Home > Net >  SwiftUI component details
SwiftUI component details

Time:09-16

Does anyone know what view this is within SwiftUI?

This is within the Apple Maps app.

enter image description here

CodePudding user response:

SwiftUI doesn't directly expose a view that looks exactly like that. In fact those buttons are probably implemented using UIKit.

It doesn't take much code to implement your own buttons with a similar appearance:

import SwiftUI
import PlaygroundSupport

struct DevSemView: View {
    var body: some View {
        VStack(spacing: 0) {
            Button { 
                print("car button pressed")
            } label: { 
                Image(systemName: "car.fill")
                    .frame(width: 44, height: 44)
            }
            Divider()
            Button { 
                print("location button pressed")
            } label: { 
                Image(systemName: "location.fill")
                    .frame(width: 44, height: 44)
            }
        }
        .background {
            RoundedRectangle(cornerRadius: 8)
                .fill(Color(uiColor: .systemBackground))
        }
        .tint(Color(uiColor: .secondaryLabel))
        .frame(width: 44)
    }
}

PlaygroundPage.current.setLiveView(ZStack {
    Color.mint
    DevSemView()
})

Dark mode appearance:

Two buttons stacked vertically, drawn to look like the buttons in Apple Maps in dark mode. The top bottom shows the car icon. The bottom icon shows the location icon.

Light mode appearance:

Two buttons stacked vertically, drawn to look like the buttons in Apple Maps in light mode. The top bottom shows the car icon. The bottom icon shows the location icon.

  • Related