Question 66994 in IOS Swift Question posted in
The official documentation can be found here.

add border left to VStack – Ios swift

I have a SwiftUI View that looks like the following:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading) {
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Speed")
                }.padding(.bottom, 10)
                
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Distance")
                }
                Spacer()
            }
            Spacer()
        }
    }
}

This looks like the following in the preview.

enter image description here

I want to add a border left of a black line to the VStack containing the Text and Image. In css I would do something like border-left: 1px solid black

Does anyone have an idea of how to do this in SwiftUI?

Tags:

2

Answers


  1. 0

    As I mentioned in comment, the existing solution gives you some good options. A really hacky way would be like this:

    struct ContentView: View {
    
    var body: some View {
        // This is a wrapper, mostly hidden except for left side
        ZStack {
            contentView
                .background(Color.white) // hide the rest of black frame
                .padding(.leading, 10) // width of "border"
        }
        .ignoresSafeArea()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.black)
    }
    
    // This is your original view
    var contentView: some View {
        
        HStack(alignment: .top) {
            VStack(alignment: .leading) {
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Speed")
                }.padding(.bottom, 10)
                
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Distance")
                }
                Spacer()
            }
            Spacer()
        }
    }
}
    Login or Signup to reply.
  2. 0

    For me I actually will code like this to get the view:

    struct Sample: View {
   var body: some View {
       HStack {
           VStack(alignment: .leading) {
               ForEach(0..<5, id: .self) { _ in
                   HStack {
                       Image(systemName: "star.fill")
                       Text("Speed")
                       Spacer()
                   }
                   .background(leftBorder)
               }
           }
           .padding(.leading)
       }
   }

   var leftBorder: some View {
       HStack {
           Rectangle()
               .frame(width: 1)
        
           Spacer()
       }
    }
}

    The Result:

    enter image description here

    But I’m not sure if this is what you want or not, but if this help I’m happy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search