Блог

У меня есть кнопка с динамическим текстом. Я хочу уменьшить размер текста, чтобы он соответствовал ему (насколько это возможно), и обернуть текст в некоторое количество строк (возможно, 2?).

По умолчанию SwiftUI, похоже, обертывает текст словами. Но, похоже, когда я использую scaledToFit модификатор в своем Text представлении, он предотвращает перенос слов.

Вот несколько примеров кода игровой площадки для иллюстрации:

 import SwiftUI
import PlaygroundSupport

struct ContentView: View {
  var body: some View {

    let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    VStack {

      // Here is the default text - see in the screenshot that it properly wraps the text
      HStack {
        Text(lorem)
      }
      .frame(width: 100, height: 100)
      .background(Color.blue)

      // Here is text that is scaled down, but prevented from wrapping, even though 
      // we have allowed it to use 2 lines.
      HStack {
        Text(lorem)
          .allowsTightening(true)
          .scaledToFit()
          .lineLimit(2)
          .minimumScaleFactor(0.7)
      }
      .frame(width: 100, height: 100)
      .background(Color.green)

      // Here is the text with the same scaling modifiers as above, but it
      // is still set to the original font size
      HStack {
        Text("Short")
          .allowsTightening(true)
          .scaledToFit()
          .lineLimit(2)
          .minimumScaleFactor(0.7)
      }
      .frame(width: 100, height: 100)
      .background(Color.pink)

    }
  }
}

PlaygroundPage.current.setLiveView(ContentView())
 

Итак, в идеале я хотел бы получить комбинацию первого и второго представлений — я бы хотел, чтобы текст был обернут, но также уменьшился до некоторого минимального размера, если текст не сразу помещается в родительское представление.

попробуйте это, и аналогично для розового:

     HStack {
        Text(lorem)
            .frame(width: 100, height: 100)  // <--- here
            .allowsTightening(true)
            .lineLimit(2)
            .scaledToFit()
            .minimumScaleFactor(0.7)
    }
    .frame(width: 100, height: 100)
    .background(Color.green)