Блог

Главная - Вопросы по программированию - Flutter — расширение поля текстовой формы не работает должным образом

Flutter — расширение поля текстовой формы не работает должным образом

#flutter #dart #uitextfield #flutter-layout

#трепетание #dart #uitextfield #flutter-layout

Вопрос:

Я пытаюсь создать свою собственную текстовую форму для использования в моем приложении по определенному дизайну, и у меня возникли некоторые проблемы с ее расширением, если это так.

В настоящее время это выглядит так:

введите описание изображения здесь

Но вот как это должно выглядеть на самом деле:

введите описание изображения здесь

Насколько я понял, для этого я должен установить для параметра expands значение TRUE, а для maxLines с minLines значение NULL.

который должен выглядеть примерно так:

 expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,

Проблема в том, что я получаю интересную ошибку:

 ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderCustomPaint's layout() function by the following
function, which probably computed the invalid constraints in question:
  _RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1298:17)
The offending constraints were:
  BoxConstraints(w=289.8, h=Infinity)

Мой КОД для пользовательской текстовой формы отправлен:

 class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;
  final bool expand;

  String capitalize(String s) => s[0].toUpperCase()   s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText,
    this.expand = false,
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(


        expands: this.expand,
        minLines: this.expand ? null : 1,
        maxLines: this.expand ? null : 1,


        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: AppColor.fontColor),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: AppColor.fontColor,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: AppColor.grayOutFontColor,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: AppColor.grayOutFontColor,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}

Используемое поле пользовательской текстовой формы:

 CustomTextField(
  expand: true,
  text:
      "British chef, restaurateur, write, television, personality, food city, and former footballer."
      "Born in Johnston, Scotland.",
  primaryFontSize: correctPrimaryFontSize * 0.8,
  secondaryFontSize: correctSecondaryFontSize,
  helperText: "about you",
  keyboardType: TextInputType.multiline,
),

Может кто-нибудь из вас объяснить мне, что я сделал не так? Или я не понял, что он расширяет?

Ответ №1:

просто назначьте

 maxLines:null,
expands:true

Ответ №2:

Добавьте строку внутри текстового поля:

maxLines: null,

Ответ №3:

Установите для свойства maxLines значение null.

 import 'package:flutter/material.dart';

class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;

  String capitalize(String s) => s[0].toUpperCase()   s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(
        minLines: null,
        maxLines: null,
        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: Colors.green),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: Colors.green,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: Colors.grey,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: Colors.grey,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: Colors.grey, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}

Используйте настраиваемое текстовое поле следующим образом:

  CustomTextField(
    text: "",
    helperText: "about you",
    keyboardType: TextInputType.multiline,
 ),

Комментарии:

1. Я это уже сделал… вы можете проверить мой код, который я опубликовал выше. «maxLines: this.expand ? null : 1,»

2. Я только что обновил свой ответ. В документации ничего не говорится о expands том, что вам это не нужно.

3. Если я буду делать так, я получу сообщение об ошибке: Obscured fields cannot be multiline. 'package:flutter/src/material/text_form_field.dart': Failed assertion: line 206 pos 15: '!obscureText || maxLines == 1'

Ответ №4:

Я нашел ответ на свой вопрос, добавив параметр с именем «expand», и я проверяю, будет ли этот параметр true или нет, я сделаю

 minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,

полный код был:

 import 'package:flutter/material.dart';
import 'package:FlutterApp_V2/apps_color/apps_color.dart';

class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;

  final bool expand;

  String capitalize(String s) => s[0].toUpperCase()   s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText,
    this.expand = false,
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(
        minLines: null,
        maxLines: !this.expand ? 1 : null,
        maxLength: !this.expand ? null : 200,

        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: AppColor.fontColor),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: AppColor.fontColor,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: AppColor.grayOutFontColor,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: AppColor.grayOutFontColor,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}