Search code examples
swiftswiftuinavigationview

Swift How can I adjust the background area of a Text

I have a swift file with a few stacks, of which the upper text acts weirdly. I can't understand why the background color of the "controller"-text extends up to the end of the screen. How can I adjust the height of the background?

 var body: some View {
        NavigationView {
            ZStack {
                Color("Themecolor")
                .edgesIgnoringSafeArea(.all)
                VStack {
                    HStack(spacing: 0) {
                      Text("BIKE")
                        .font(.system(size: 52))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                      Text("Controller")
                        .font(.system(size: 52))
                        .foregroundColor(.black)
                        .background(
                            .white)
                    }
                    .offset(y: -50)

enter image description here

Solution

  • By default new background modifier with style is applied with ignoring safe area for .all, so we can explicitly turn it off, like

      Text("Controller")
    .font(.system(size: 52))
    .foregroundColor(.black)
    .background(
        .white, ignoresSafeAreaEdges: .bottom)  // << here !!

    demo

    Tested with Xcode 13.4 / iOS 15.5

    Alternate: for backward compatibility is to use different variant of modifier

      Text("Controller")
    .font(.system(size: 52))
    .foregroundColor(.black)
    .background(
        Rectangle().fill(.white))    // << here !!