Флуттер всплывающие маршруты с поддержкой петель

Важно!

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

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

По умолчанию это диалоговое окно отображается на левом экране для устройств с настройкой слева направо.

showDialog(
    context: context,
    builder: (_) => AlertDialog(
        title: Text("Hinge Aware Dialog"),
        content: Text("Going on the left screen"),
    ),
);

Диалоговое окно Флуттер Surface Duo на экране слева

Мы можем заставить диалоговое окно переходить на второй экран, который является экраном справа налево для устройств, настроенных слева направо:

showDialog(
    context: context,
    builder: (_) => AlertDialog(
        title: Text("Hinge Aware Dialog"),
        content: Text("Going on the right screen"),
    ),
    screen: 1, // By default, this is 0
);

Диалоговое окно Флуттер Surface Duo на правом экране

У вас могут быть собственные модальные или всплывающие классы маршрутов в приложении, которые вы хотите сделать с учетом шарнира. Мы предоставляем мини- HingeAvoidingModalWrapper приложение, которое вы добавили в верхней части вашего маршрута, чтобы избежать шарнира. Это мини-приложение также принимает screen параметр:

class _MyRoute<T> extends PopupRoute<T> {
    @override
    Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return HingeAvoidingModalWrapper(
            child: _myPageLayout(),
            screen: 1 // By default, this is 0
        );
    }
}