Swift How can I adjust the background area of a Text-CodePudding

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)

Best and many thanks, David

CodePudding user response：

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 !!

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 !!