Блог

Главная - Вопросы по программированию - Как преобразовать строку в столбец, если она начинает переполняться?

Как преобразовать строку в столбец, если она начинает переполняться?

#flutter #flutter-layout

#flutter #flutter-макет

Вопрос:

Есть ли какой-либо другой способ, кроме того, чтобы вручную проверять Row , переполняется ли a, преобразовать его в a Column ?

Ответ №1:

Используйте OverflowBar то, что поставляется из коробки с Flutter SDK.

 @override
Widget build(BuildContext context) {
  return OverflowBar(
    children: [
      Container(height: 100, width: 200, color: Colors.blue),
      Container(height: 100, width: 200, color: Colors.orange),
      Container(height: 100, width: 200, color: Colors.white),
      Container(height: 100, width: 200, color: Colors.black),
    ],
  );
}

Ответ №2:

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

Во-вторых, вы также можете использовать виджет Flex, который принимает параметр горизонтальной или вертикальной ориентации (строка / столбец) и настраивает параметр в зависимости от размера экрана.

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

1. Во-первых, Wrap не может удовлетворить мои потребности, потому что он останется в горизонтальном направлении (если я не изменю его явно). Второй Flex также не принесет большой пользы, потому что дочерний элемент может переполниться по горизонтальной оси.

2. спасибо Wrap , именно то, что я искал

Ответ №3:

Использование GridView — лучший выбор для вашего случая. Взгляните на это видео на YouTube, предоставленное командой Flutter.

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

1. Допустим, мне нужно показать только 4 элемента либо по горизонтали (первый выбор), либо по вертикали (если горизонтальный сбой), как GridView мне получить желаемый пользовательский интерфейс. Я думаю, вы пропустили вопрос.

2. @iDecode извините за мое недопонимание. Вы можете проверить это вручную, а затем использовать MediaQuery.of(context).size.width для определения с помощью Row или Column . Допустим, для каждого элемента требуется 100 пикселей, поэтому, если MediaQuery.of(context).size.width <400 используется Row , в противном случае используйте Column . Но это работает только для статического элемента.

3. Итак, вместо того, чтобы выполнять эту проверку, не кажется ли вам, что simple OverflowBar намного лучше?

4. да, вы правы, никогда раньше не пробовали до сих пор. Спасибо! Хорошего дня!

Метки: ,