Текстовые границы SwiftUI TextField не обновляются с помощью GeometryReader при изменении размера окна, что приводит к появлению ошибок - PullRequest
Новая
       10

Текстовые границы SwiftUI TextField не обновляются с помощью GeometryReader при изменении размера окна, что приводит к появлению ошибок

2 голосов
/ 21 января 2020

Багги выглядит , включая текст, выглядящий вертикально усеченным, а синяя рамка выбора не совпадает. Эти проблемы имеют прямое отношение и более подробно рассматриваются в этом вопросе.

Мне сказали, что я должен задавать отдельные вопросы, когда испытываю проблемы с TextField. Так что вот один. Проблема в том, что когда размер текста зависит от ширины окна, изменение размера окна придает ему ошибочный вид. Посмотрите на скриншоты. Код в VStack и GeometryReader.

Код: 

TextField("World Name", text: self.$WorldName)
    .font(.system(size: geometry.size.width/24))
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.leading, .trailing], 6)
    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
    .background(
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.init(white: 0.28))
    )
TextField("World Seed", text: self.$WorldSeed)
    .font(.system(size: geometry.size.width/24))
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.leading, .trailing], 6)
    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
    .background(
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.init(white: 0.28))
    )

Вот скриншоты, демонстрирующие это поведение.

Обычное окно:

enter image description here

Когда я меняю его размер, это выглядит так:

enter image description here

Но как только когда я нажимаю на поля, он снова выглядит нормально:

enter image description here

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

enter image description here

Как бы я go об исправлении этой проблемы?

Возможный подход - обновлять окно каждый раз, когда оно изменяется, но я не хочу этого делать из соображений производительности. Но если производительность здесь не является проблемой, мне нужно знать, как вызывать функцию при изменении размера окна из представления.

И чтобы сделать это избыточно ясным, я не создаю iOS приложений, Я создаю приложения MacOS.

Мой ожидаемый результат: когда размер окна изменяется, я хочу, чтобы текстовое поле сразу выглядело как третье изображение, где границы текста соответствуют новому размеру текстового поля, и, таким образом, синяя рамка будет соответствовать текстовому полю, и текст не будет выглядеть усеченным. Что я могу добавить к своему коду, чтобы исправить это наиболее эффективным способом? Как я могу обновить границы текстового поля с помощью GeometryReader?

Примечание. Эта ошибка не возникает, если текст TYPED в TextField. ТОЛЬКО когда он пуст.

Обобщенный список заметок:

  • Я создал TextField
  • Размер шрифта TextField зависит от GeometryReader.
  • Если пусто, текст TextField будет обрезан до выбранного
  • Ошибка не возникает, если в текстовом поле набран текст
  • Синяя рамка также не соответствует текстовому полю и, поскольку я предполагаю, что это представляет границы текстового поля, это напрямую связано с усеченным текстом.
  • Возможно, вы заметили, что на новом изображении есть кнопка more world options . Проигнорируйте это.

Учитывая эту информацию, как я могу сделать так, чтобы текстовые поля при изменении размера сразу выглядели как третье изображение, а не как второе / четвертое, поэтому я исправляю эту проблему?

Есть ли способ исправить эту ошибку при , сохранив вид текстовых полей?

1 Ответ

0 голосов
/ 21 января 2020

По моим исследованиям, обнаруженная проблема возникла из-за использования стиля PlainTextFieldStyle ... для этого нет обходного пути (вы можете отправить отзыв в Apple, потому что это определенно проблема). Поэтому, если проблема с topi c является критической, я рекомендую использовать SquareBorderTextFieldStyle явно, как показано ниже для текстовых полей с таким поведением (по крайней мере, временным). Квадратный стиль протестирован и работал в выложенном сценарии с Xcode 11.2 / macOS 10.15.

Вот результат различных конфигураций:

enter image description here

Вот код для результата скриншота : 

        GeometryReader { geometry in
            VStack {
                TextField("World Name", text: self.$WorldName)
                    .font(.system(size: geometry.size.width/24))
                    .textFieldStyle(SquareBorderTextFieldStyle())
                    .padding([.leading, .trailing], 6)
                    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
//                    .background(
//                        RoundedRectangle(cornerRadius: 8)
//                            .fill(Color.init(white: 0.28))
//                    )
                TextField("World Seed", text: self.$WorldSeed)
                    .font(.system(size: geometry.size.width/24))
                    .textFieldStyle(PlainTextFieldStyle())
                    .padding([.leading, .trailing], 6)
                    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.init(white: 0.28))
                    )
            }
        }
...