Метод 1: MediaQuery.of(context).padding
Класс MediaQuery во Flutter обеспечивает доступ к информации о конфигурации текущего носителя (экрана). Используя свойство заполнения, мы можем вычесть высоту AppBar из доступного вертикального пространства.
final double appBarHeight = AppBar().preferredSize.height;
final double statusBarHeight = MediaQuery.of(context).padding.top;
final double availableHeight = MediaQuery.of(context).size.height - appBarHeight - statusBarHeight;
Метод 2: PreferredSizeWidget
Другой подход заключается в создании собственного виджета AppBar путем расширения класса PreferredSizeWidget. Это позволяет нам переопределить свойство PreferredSize и вычесть высоту AppBar из доступного пространства.
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Size get preferredSize {
final double appBarHeight = AppBar().preferredSize.height;
return Size.fromHeight(appBarHeight);
}
@override
Widget build(BuildContext context) {
// Your custom AppBar content here
}
}
// Usage
final double availableHeight = MediaQuery.of(context).size.height - CustomAppBar().preferredSize.height;
Метод 3. Заполнение тела Scaffold
С помощью этого метода мы можем настроить заполнение содержимого тела виджета Scaffold, чтобы вычесть высоту AppBar из доступного пространства.
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Padding(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + AppBar().preferredSize.height),
child: Container(
// Your body content here
),
),
);
Метод 4: виджет SafeArea
Виджет SafeArea во Flutter автоматически настраивает отступы своего дочернего элемента, чтобы избежать вторжения элементов пользовательского интерфейса системного уровня (таких как метки или строки состояния). Обертывая наш контент с помощью SafeArea, мы можем вычесть высоту AppBar из доступного пространства.
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: SafeArea(
child: Container(
// Your body content here
),
),
);
В этой статье мы рассмотрели несколько способов вычитания высоты AppBar во Flutter. Используя MediaQuery, PreferredSizeWidget, дополнение тела Scaffold и SafeArea, мы можем легко рассчитать и настроить доступное пространство в макете нашего приложения. Каждый метод предлагает свой подход, что позволяет разработчикам выбрать тот, который лучше всего соответствует их потребностям.
Помните: понимание того, как уменьшить высоту AppBar, имеет решающее значение для точного макета пользовательского интерфейса и создания визуально привлекательных приложений Flutter.