В приложении Flutter панель приложения является важным компонентом, обеспечивающим навигацию и важные действия для пользователей. Добавление значков в виде префиксов или суффиксов на панель приложения может улучшить взаимодействие с пользователем и сделать приложение более привлекательным. В этой статье мы рассмотрим несколько способов добиться этого во Flutter, а также приведем примеры кода.
Метод 1. Использование начальных и конечных свойств виджета AppBar
Один простой подход — использовать свойства leading
и trailing
виджета AppBar
виджет. Эти свойства позволяют нам добавлять виджеты в виде значков в левой и правой частях панели приложения соответственно.
AppBar(
leading: Icon(Icons.search), // Prefix icon
title: Text('App Bar with Prefix Icon'),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.notifications), // Suffix icon
),
],
)
Метод 2: настройка виджета AppBar с помощью строки
Другой способ добавить значки префиксов и суффиксов — настроить виджет AppBar
с помощью Row
. Этот метод дает вам больше гибкости в расположении значков на панели приложения.
AppBar(
title: Row(
children: [
Icon(Icons.search), // Prefix icon
Text('App Bar with Prefix Icon'),
Icon(Icons.notifications), // Suffix icon
],
),
)
Метод 3. Создание пользовательского виджета AppBar
Для более расширенной настройки вы можете создать собственный виджет AppBar
, который инкапсулирует желаемый макет и поведение. Такой подход дает вам полный контроль над внешним видом и функциональностью панели приложения.
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
@override
Widget build(BuildContext context) {
return AppBar(
title: Row(
children: [
Icon(Icons.search), // Prefix icon
Text('App Bar with Prefix Icon'),
Icon(Icons.notifications), // Suffix icon
],
),
);
}
}
// Usage:
Scaffold(
appBar: CustomAppBar(),
// ...
)
Добавление значков префиксов и суффиксов на панель приложения в приложении Flutter может значительно улучшить взаимодействие с пользователем и повысить его визуальную привлекательность. В этой статье мы рассмотрели три различных метода достижения этой цели. Используя свойства leading
и trailing
, настраивая виджет AppBar
с помощью Row
или создавая собственный AppBar
вы можете легко включать значки префиксов и суффиксов в свое приложение Flutter.