CODEWITHSUNDEEP
iosswiftswiftui
Mattis Schulte
Mattis Schulte

Reputation: 699

How can I make a background in SwiftUI translucent?

How can I make the text background above the navigation bar translucent so that it looks like the text and navigation bar are the same object?

VStack(spacing: 0) {
    Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.gray) // I used a custom color set in the screenshot
        .font(.footnote)
    NavigationView {
        List {
            Text("Name")
            Text("Name")
            Text("Name")
        } .listStyle(GroupedListStyle())

        .navigationBarTitle(Text(""), displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
            leading:
            Button("Cancel") {
                // self.presentationMode.wrappedValue.dismiss()
            },
            trailing:
            Button("Done") {

            }.disabled(true)
        )
    }
}

enter image description here

Upvotes: 23

Views: 47247

Answers (1)

David Chopin
David Chopin

Reputation: 3064

SwiftUI's Color has an opacity() function that returns another Color with the given opacity. An opacity of 1.0 would be the same color, while an opacity of 0.0 would be completely clear.

For example, if you wanted to have the color be between completely opaque and completely clear, change:

Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.gray)
        .font(.footnote)

To:

Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.gray.opacity(0.5)) //Here is where we use the opacity
        .font(.footnote)

Source: https://developer.apple.com/documentation/swiftui/color

Upvotes: 48

Related Questions