SwifUI: How to have different text (size + color) in a SwiftUI Text string and not cause line breaking oddities on maximum accessibility sizes

user_9766922 0
Viewed 46

I'm Having a text view with custom font and color. One of them is a button label. I put them into an HStack for horizontal alignment. However, the text breaks oddly when the text size gets bigger.

enter image description here

The below image is what im trying to create. enter image description here

This is my current code, I've tried .allowsTightening(true) or .fixedSize(horizontal: true, vertical: false) but nothing works out

        HStack(spacing: Constants.horizontalGap4){
        Image(systemName: isChecked ? "checkmark.square.fill" : "square")
            .foregroundColor(isChecked ? Color(UIColor.systemBlue) : Color.secondary)
            .onTapGesture {
                self.isChecked.toggle()
            }
        ActionTinyTextView(text: "I agree with the ", color: Color.gray)
            .allowsTightening(true)
        Button {                
        } label: {                
            ActionTinyTextView(text: CRContent.termAndConditionText)
                .allowsTightening(true)
        }
    }
swiftui
2 Answers

It can be used markdown, like

Text("I agree with [Terms & Use](link1) and [Privacy Policy](link2)")
  .foregroundColor(.gray) // << for main text
  .tint(.green)    // << your color for active text

demo

For such action links handling see my other answer https://stackoverflow.com/a/72798487/12299030

user_122990300

You can achieve this with the + operator for Text view.

As long as you will be using only the modifiers which have a Text return type, this will solve your problem. Sample code and image are below:

enter image description here

struct SampleView: View {
  var body: some View {
    ZStack(alignment: .leading) {
        Color.black.edgesIgnoringSafeArea(.all)
        VStack { //from here
            Text("I agree with the ")
                .foregroundColor(.white) + //this
            Text("Terms & Use")
                .foregroundColor(.teal)
                .fontWeight(.bold) + //this
            Text(" and ")
                .foregroundColor(.white) + //this
            Text("Privacy Policy.")
                .foregroundColor(.teal)
                .fontWeight(.bold)
        }
        .frame(width: 180)
    }
  }
}
user_167314010
Related