CODEWITHSUNDEEP
swiftxcodemacosswiftui
flite3
flite3

Reputation: 13

Getting rid of borders around views in SwiftUI

I've been having issues with the look of my macOS app that I'm building using SwiftUI. Every text element and stack that I've put in to the app, seems to have a light grey border around it which I can't get rid of. No mater what I do it's always there. I'm using the code below to display text in the upper part of my app. 

 GroupBox{//Remaining Time
                        Text("\(self.RemainingTime)")
                            .font(Font.custom("Lato", size: 30.0))
                            .fontWeight(.light)
                            //.foregroundColor(Color.black)
                            .padding(.bottom, -5)
                        Text("Remaining Time")
                            .font(Font.custom("Lato", size: 10.0))
                            .fontWeight(.bold)
                    }.frame(width: 120, height: 54)

Here's what it looks like: Result of code in SwiftUI:

enter image description here

I'm not sure how to get rid of that border/grey background. It's even more prominent in Light Mode vs Dark Mode. I've even added a background colour but it only puts the colour around the numbers, but you can still see the light grey part as if it's a border or something.

Needless to say, I'm very new to SwiftUI and so I apologize if I'm asking a super Noob question, but I'm killing myself trying to get rid of it. Any help would be greatly appreciated.

Upvotes: 1

Views: 1574

Answers (1)

Asperi
Asperi

Reputation: 257693

This is a default look&feel of GroupBox

Here is doc for it

/// A stylized view with an optional label that is associated with a logical
/// grouping of content.
public struct GroupBox<Label, Content> : View where Label : View, Content : View {

If you want to get rid of this, you can use just VStack, as in below

VStack {//<< the same but without group box styling !!
                    Text("\(self.RemainingTime)")
                        .font(Font.custom("Lato", size: 30.0))
                        .fontWeight(.light)
                        //.foregroundColor(Color.black)
                        .padding(.bottom, -5)
                    Text("Remaining Time")
                        .font(Font.custom("Lato", size: 10.0))
                        .fontWeight(.bold)
                }.frame(width: 120, height: 54)

Upvotes: 2

Related Questions