Как сделать все страницы приложения Flutter отзывчивыми?
Как мне сделать все мои страницы адаптивными в приложении Flutter? Должен ли я реализовать код адаптивного макета на каждой странице или он унаследует адаптивный макет от своего родительского элемента (main.dart)? Существует множество руководств о том, как сделать экран администратора отзывчивым. Но если приложение Flutter содержит несколько страниц, должен ли я писать другой код макета для макета мобильного устройства, вкладок и рабочего стола?
Во Flutter нет такого термина, как «страница». Мой совет — потратьте некоторое время на изучение основ Flutter.
Это зависит от того, как вы определяете адаптивный экран для всех страниц... Макет некоторых страниц сильно меняется, а другие нет. Вам нужно сначала это выяснить. Если хотите, вы можете обернуть все свои «страницы» одним LayoutBuilder и передать размеры в качестве параметра, чтобы они перестраивались каждый раз при изменении области просмотра. Ключ также может помочь.
@MaximSaplin под страницей я имел в виду различные файлы дартс, которые взаимодействуют с пользователями. Например, страница входа в систему, страница сотрудника, страница продукта и т. д.
@ClevinoAlrin, если в моем приложении есть страница продукта и страница категории, мне придется разрабатывать дизайн отдельно для каждого размера экрана с помощью рефакторинга виджетов (чтобы уменьшить дублирование кода)? Я прав?
Да, если ваши виджеты имеют схожую структуру и отличаются только значениями или размерами, вы можете выполнить рефакторинг в отдельный виджет и использовать этот виджет, предоставив параметры для значений.
@user19976096 user19976096 1 файл не обязательно является 1 страницей, потому что вы можете создать файл только для виджета, который является частью страниц. Вам следует разделить свои страницы на несколько компонентов многократного использования, а затем создать несколько макетов в зависимости от того, как вы хотите, чтобы ваши «страницы» вели себя в зависимости от поддержки.
Ответы 1
Добрый день!
В нашем мобильном приложении мы используем комбинацию MediaQuery.of(context).size и виджетов, таких как SizedBox(), для достижения оперативности. Пример:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
child: COntainer(),
);
}
}
Существует также LayoutBuilder(), который вы можете использовать для создания виджетов с параметрами размера, которые вы предоставляете LayoutBuilder. Это может помочь: https://docs.flutter.dev/ui/layout/Response/adaptive-Response