CODEWITHSUNDEEP
swiftswiftui
user1591668
user1591668

Reputation: 2883

SwiftUI how can I have 2 texts next to circle

I have a large circle and next to that circle I would like to display 2 Texts 1 underneath each other . If you look at the image below I was able to successfully complete this in UIKit . In SwiftUi I almost have it except that the date text line is starting after the bottom of the circle . I would like it so that the date appears right underneath the name just like in UIKit . I have been trying different things but no luck this is my code, any suggestions would be great

        VStack(alignment: .leading,spacing: 0) {
                                HStack()  {
                                    Circle()
                                        .fill(Color(TypeBackGroundColor(type: value.color)))
                                        .frame(width: 40.0, height: 40.0)

                                HStack()  {

                                    Text("\(value.fullname)")
                                        .font(.system(size: 15))
                                        .bold()
                                        .onTapGesture {
                                            print("FullName Clicked")
                                        }
                                }.padding(.leading, 13)
                            }.padding(.leading, 20)
                            
                                HStack(spacing: 1) {
                                    Text("\(value.time)")
                                        .foregroundColor(Color(UIColor.gray))
                                        .font(.system(size: 12))
                                        .bold()
                                    
                                }.padding(.leading, 80)
                        }

This is how I have it in UIKit

enter image description here

This is how it currently is in SwiftUI

enter image description here

Upvotes: 1

Views: 339

Answers (2)

Harshil Patel
Harshil Patel

Reputation: 1474

struct ContentView: View {
        var body: some View {
            HStack {
                ZStack {
                    Circle()
                        .fill(Color.orange)
                        .frame(width: 40.0, height: 40.0)

                    Text("LD")
                        .bold()
                }
            VStack(alignment: .leading, spacing: 1) {
                    Text("Luffy D")
                        .font(.system(size: 16))
                        .bold()
                    Text("MM DD, YYYY | Type")
                        .foregroundColor(Color(UIColor.gray))
                        .font(.system(size: 12))
                        .bold()
            }
        }
    }
}

Result:

enter image description here

Upvotes: 1

Sweeper
Sweeper

Reputation: 270770

The outermost view should be an HStack, rather than a VStack. On the left there is the circle, and on the right there is a VStack with two Texts:

    HStack {
        Circle()
            .fill(Color.orange)
            .frame(width: 40.0, height: 40.0)
        VStack(alignment: .leading, spacing: 1) {
            Text("Full Name")
                .font(.system(size: 15))
                .bold()
            Text("May 14, 2020 | Sports")
                .foregroundColor(Color.gray)
                .font(.system(size: 12))
                .bold()
        }
    }

enter image description here

Upvotes: 2

Related Questions