Мини-приложение Flutter TwoPane

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

Установка

Чтобы проект зависел от dual_screen, пакет, содержащий , можно выполнить следующее TwoPane:

flutter pub add dual_screen

При этом в файл pubspec.yaml пакета будет добавлена строка, подобная этой , и будет выполнена неявная flutter pub getстрока :

dependencies:
  dual_screen: ^1.0.2+2

Если вы добавили зависимость вручную в файл pubspec.yaml, необходимо также запустить flutter pub get.

Теперь вы можете приступить к использованию TwoPane мини-приложения в файлах dart, где также потребуется импортировать зависимость:

import 'package:dual_screen/dual_screen.dart';

Отрисовка складного устройства

Когда приложение развернуто на Surface Duo, каждое мини-приложение заполняет весь экран:

Кроссплатформенная отрисовка

Когда приложение отображается на больших экранах, таких как планшет, классическое приложение или веб-страница, отображаются панели, но их размер задается пропорционально:

TwoPane API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

Свойства мини-приложения TwoPane :

• startPane — Начальная панель, которая может находиться слева для макетов слева направо или в верхней части для макетов сверху вниз. Если panePriority имеет значение start и нет петли, это единственная видимая панель.
• endPane — Конечная панель, которая может находиться справа для макетов слева направо или снизу для макетов сверху вниз. Если panePriority имеет значение endи нет петли, это единственная видимая панель.
• paneProportion — Пропорция экрана, занятого начальной панелью. Конечная панель занимает остальную часть пространства. Значение 0,5 сделает две панели равными. Это свойство игнорируется для дисплеев с петлями, и в этом случае каждая панель занимает один экран.
• panePriority — показывать только одну начальную, конечную или и ту и другую. Это свойство игнорируется для дисплеев с петлями, и в этом случае both видны области.
• direction — следует ли сложить две панели по вертикали или по горизонтали, аналогично направлению Flex. Это свойство игнорируется для дисплеев с петлями. В этом случае направление используется horizontal для вертикальных петлей и vertical для горизонтальных петлей.
• textDirection — Если панели расположены по горизонтали, это определяет, какие панели находятся слева. Ведет себя так же, как Flex textDirection
• verticalDirection — Если панели расположены по вертикали, это определяет, какая из них будет вверху. Ведет себя так же, как Flex verticalDirection
• padding — Заполнение между TwoPane и краями экрана. Если между TwoPane и корневым элементом MediaQuery есть интервал, padding используется для правильного выравнивания двух панелей по петли.

Совет

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

Пример использования

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

Этот пример кода дает результаты в начале этой статьи:

• На Surface Duo мини-приложение A и мини-приложение B занимают один экран.
• На планшете или рабочем столе мини-приложение A занимает 30 % экрана, а мини-приложение B — оставшиеся 70 %.
• На маленьком телефоне , шириной менее 500 логических пикселей, отображается только мини-приложение A.