В этой статье мы используем Flutter для реализации отзывчивости, если вы не знаете, что такое Flutter.
Flutter — это пакет разработки программного обеспечения пользовательского интерфейса с открытым исходным кодом, созданный Google, который превосходно подходит для создания красивых, высококачественных приложений благодаря единой базе кода для iOS и Android, настраиваемым виджетам, быстрой разработке с горячей перезагрузкой и надежной поддержке сообщества.
Существует два основных подхода к созданию приложений Flutter с адаптивным дизайном:
Использование класса LayoutBuilder
Конструктор макетов полностью зависит от пользовательских определений, пользователь должен решить логику, когда обновлять пользовательский интерфейс. Простым примером является отображение панели навигации в сжатом или увеличенном виде.
Логика будет реализована в Scaffold конкретного виджета.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('LayoutBuilder Example')), body: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { if (constraints.maxWidth > 600) { return _buildWideContainers(); } else { return _buildNormalContainer(); } }, ), ); }
Это имеет ограниченный контроль, и вам необходимо поддерживать различные компоненты, что делает медиа-запрос желаемым выбором.
Использование класса MediaQuery.
MediaQuery создает поддерево, в котором медиа-запросы выполняют операции изменения размера в соответствии с текущими размерами экрана.
Например, чтобы узнать размер текущего носителя (например, окна, содержащего ваше приложение), вы можете использовать MediaQuery.sizeOf(context)
. Это поможет компоненту перестроиться при изменении размера экрана.
// Child component class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { final Size screenSize = MediaQuery.of(context).size; final double width = screenSize.width * 0.8; final double height = screenSize.height * 0.5; return Container( width: width, height: height, color: Colors.blue, child: Center( child: Text( 'My Widget', style: TextStyle(fontSize: 24), ), ), ); } } //Parent component class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', home: Scaffold( appBar: AppBar( title: Text('My App'), ), body: Center( child: MyWidget(), ), ), ); } }
Если в области действия нет MediaQuery, то ряд методов, таких как MediaQuery.of и MediaQuery.sizeOf, выдаст исключение. В качестве альтернативы можно использовать методы варианта может быть- (такие как MediaQuery.maybeOf и MediaQuery.maybeSizeOf), которые возвращают значение null вместо выдачи, если в области действия нет MediaQuery.
Я надеюсь, что эта статья оказалась для вас полезной и вы смогли узнать хотя бы на 1 % больше об отзывчивости. Я очень признателен, если у вас есть какие-либо вопросы, пожалуйста, используйте раздел комментариев, чтобы получить их разъяснения.