Многие разработчики знакомы с таким понятием, как «UI аккордеон» из мира web-разработки, ведь чаще всего этот элемент используется и внедряется именно на сайтах. Во всех стадиях развития frontend разработки аккордеоны внедрялись через библиотеку jQuery, нативном JavaScript, чистом CSS, а также через многочисленные фреймворки.
В мобильной разработке аккордеоны также играют значимую роль в построении интерфейса, тем более, когда речь идет про отображение большого количества текстовой информации на относительно небольших устройствах.
Как раз в ходе разработки мобильного приложения «Медицинский личный кабинет» внедрение аккордеонов оказалось вполне уместным на странице информации о лекарственном средстве, ведь если открыть упаковку любого препарата, то в ней будет огромная текстовая аннотация, и показывать все это сразу в открытом виде — просто неграмотно. Поэтому в данной статье я поделюсь тем, как мы реализовали этот элемент интерфейса.
Для начала в папке UI компонентов создаем файл с оберткой, которую будем в последующем использовать на различных страницах, в нашем случае это accordion_panel.dart, и первым делом импортируем в него material.dart
Далее создадим виджет StatefulWidget, назовем его Accordion и пропишем конструктор:
class Accordion extends StatefulWidget {
final String title;
final String content;
const Accordion({Key? key, required this.title, required this.content})
: super(key: key);
@override
_AccordionState createState() => _AccordionState();
}
А дальше опишем его состояние:
class _AccordionState extends State {
bool _showContent = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
ListTile(
onTap: () {
setState(() {
_showContent = !_showContent;
});
},
title: Text(widget.title),
trailing: Icon(
_showContent ? Icons.arrow_drop_up : Icons.arrow_drop_down,)
),
if (_showContent) Container(
child: Text(widget.content),
) else Container(),
],);
}
}
Небольшое пояснение к содержимому состояния:
В случае с _AccordionState мы формируем наше отображение аккордеона по принципу создания колонки, содержащую в себе:
- ListTile – размещаем в нем заголовок аккордеона и иконку стрелочки, которая будет меняться в зависимости от клика, и на весь элемент вешаем событие onTap, который будет показывать нам содержимое;
- Container – показываем содержимое виджета Text, если кликнули по ListTile.
Теперь переходим на страницу, где нужно отобразить аккордеон, и импортируем нашу заготовку.
import '../../accordion_panel.dart';
Создаем виджет StatefulWidget с названием _AccordeonWidget и размещаем наши аккордеоны:
class _AccordeonWidgetState extends State<_AccordeonWidget> {
@override
Widget build(BuildContext context) {
return Column(
children: const [
Accordion(
title: 'Описание лекарственной формы',
content:
'Цитрамон, Таб. 240 мг+180 мг+30 мг: 6, 10, 12, 18, 20, 30, 50 шт., рег. №: Р N000499/01 от 04.08.10 - Бессрочно',
),
Accordion(
title: 'Режим дозирования',
content:
'Способ применения и режим дозирования конкретного препарата зависят от его формы выпуска и других факторов. Оптимальный режим дозирования определяет врач. Следует строго соблюдать соответствие используемой лекарственной формы конкретного препарата показаниям к применению и режиму дозирования.',
),
],
);
}}
Вот и все, самый просто способ реализовать UI элемент аккордеонов.
Естественно, к заготовке можно применить различные стили, согласно вашему дизайну, а также выводить динамически содержимое аккордеонов, в зависимости от выполняемых запросов.
Если у вас есть предложения по улучшению кода, то буду рад обсудить их через почту
Источник: https://www.spargo.ru/development-blog/accordions-flutter/