DropdownButtonFormField, с фиксированной шириной, но с динамическими текстовыми элементами - PullRequest
Новая
       22

DropdownButtonFormField, с фиксированной шириной, но с динамическими текстовыми элементами

2 голосов
/ 09 марта 2019

Я не думаю, что понимаю ограничения во Флаттере, которые так хорошо переносят меня!

Я хочу DropdownButtonFormField, который заполняет свои элементы из БД. Строка может иметь любую динамическую длину. Поэтому я решил иметь фиксированную ширину DropdownButtonFormField и DropdownMenuItem будет иметь эллипс Text.

Вот что я пробовал. 

SizedBox(
  width: 136.0,
  child: DropdownButtonFormField<int>(
    hint: Text("hintText")
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(0.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        isDense: true),
    items: [
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "less character",
            ),
        ),
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "mooooorrrrreeee character",
            ),
        )
    ]
  ),
);

class TextOneLine extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign textAlign;
  final bool autoSize;

  TextOneLine(
    String data, {
    Key key,
    this.style,
    this.textAlign,
    this.autoSize = false,
  })  : this.data = data,
        assert(data != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        data,
        style: style,
        textAlign: textAlign,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      );
  }
}
  • Я получаю ошибку переполнения

overflow error

  • но когда я нажимаю DropdownButtonFormField, список DropdownMenuItem становится эллиптическим.

drop down list with ellipsed text

Как мне избавиться от ошибки переполнения? Я не могу иметь гибкий или расширенный DropDownButtonFormField, потому что длина строки может быть динамической (может быть больше, чем может уместиться).

1 Ответ

2 голосов
/ 11 марта 2019

Пожалуйста, обратитесь к прикрепленным изображениям, я добавил 3 изображения.

Изображение 1: это проблема, которую вы получаете.

Изображение 2: когда я удалил width изSizedBox.Теперь он показывает 3 поля: 1 - текст подсказки, а другое - пустое, а третье - стрелку раскрывающегося списка.Я думаю, что переполнение вызывает из-за 2-го пустого пространства.

Изображение 3: Теперь я снова добавил ширину к SizedBox из 136 и поместил SizedBox внутри Container с фиксированным размером ширины 100 (естьширина текста в раскрывающемся списке, и он наверняка обернет ваш текст в соответствии с шириной).Это решило проблему переполнения в соответствии с кодом, который вы дали.

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

SizedBox(
        width: 136,
        child: DropdownButtonFormField<int>(
            hint: Text("hintText"),
            decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.0),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                isDense: true),
            items: [
              DropdownMenuItem<int>(
                value: 0,
                child: Container(
                  width: 100,
                  child: TextOneLine(
                    "less character",
                  ),
                ),
              ),
              DropdownMenuItem<int>(
                  value: 0,
                  child: Container(
                    width: 100,
                    child: TextOneLine(
                      "mooooorrrrreeee character",
                    ),
                  ))
            ]),
      )

image_collage

Попробуйте и дайте мне знать, была ли это проблема (ирешено) и, пожалуйста, держите нас в курсе любого другого обходного пути, который вы сделали.Спасибо

...