Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a background in SwiftUI translucent?

Tags:

ios

swift

swiftui

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

like image 439
Mattis Schulte Avatar asked Nov 11 '19 17:11

Mattis Schulte


1 Answers

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

like image 195
David Chopin Avatar answered Nov 01 '22 08:11

David Chopin