В приложении 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.