🧩ExpansionPanel

Что такое ExpansionPanel

ExpansionPanel в Flutter — это виджет, который позволяет создавать сворачиваемые и разворачиваемые панели. Они идеально подходят для отображения информации, которую можно скрыть или раскрыть по мере необходимости. Например, вы можете использовать ExpansionPanel для представления списков вопросов и ответов, где пользователи могут щелкнуть заголовок, чтобы увидеть или скрыть дополнительные детали.

Пример использования

Вот пример, как создать ExpansionPanel с заголовком и телом:

import 'package:flutter/material.dart';

class ExpansionPanelListExampleApp extends StatelessWidget {
  const ExpansionPanelListExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ExpansionPanelList Sample')),
        body: const ExpansionPanelListExample(),
      ),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

class ExpansionPanelListExample extends StatefulWidget {
  const ExpansionPanelListExample({super.key});

  @override
  State<ExpansionPanelListExample> createState() =>
      _ExpansionPanelListExampleState();
}

class _ExpansionPanelListExampleState extends State<ExpansionPanelListExample> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: ListTile(
              title: Text(item.expandedValue),
              subtitle:
              const Text('To delete this panel, tap the trash can icon'),
              trailing: const Icon(Icons.delete),
              onTap: () {
                setState(() {
                  _data.removeWhere((Item currentItem) => item == currentItem);
                });
              }),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

Как работает код

  1. ExpansionPanel: Основной виджет, который принимает несколько параметров для настройки.

  2. headerBuilder: Функция, которая строит заголовок панели. Она получает контекст и состояние (развернуто или свернуто).

  3. body: Содержимое, которое будет отображаться, когда панель развернута.

  4. isExpanded: Логическое значение, определяющее, развернута ли панель.

  5. canTapOnHeader: Если установлено в true, позволяет пользователю щелкать по заголовку для разворачивания/сворачивания панели.

Все настройки ExpansionPanel

  1. required Widget Function(BuildContext, bool) headerBuilder

    • Описание: Функция, которая строит заголовок панели. Принимает контекст и логическое значение (развернута ли панель).

    • Пример:

      headerBuilder: (context, isExpanded) {
  return ListTile(title: Text('Заголовок'));
}

  2. required Widget body

    • Описание: Содержимое, которое будет показано, когда панель развернута.

    • Пример:

      body: ListTile(title: Text('Это тело панели')),

  3. bool isExpanded

    • Описание: Определяет, развернута ли панель. По умолчанию false.

    • Пример:

      isExpanded: true // Панель будет развернута по умолчанию

  4. bool canTapOnHeader

    • Описание: Определяет, можно ли щелкать по заголовку для разворачивания/сворачивания панели. По умолчанию false.

    • Пример:

      canTapOnHeader: true // Позволяет щелкать на заголовке

  5. Color? backgroundColor

    • Описание: Цвет фона панели.

    • Пример:

      backgroundColor: Colors.white // Белый цвет фона

  6. Color? splashColor

    • Описание: Цвет эффекта всплеска при нажатии на панель.

    • Пример:

      splashColor: Colors.blue.withOpacity(0.5) // Полупрозрачный синий цвет

  7. Color? highlightColor

    • Описание: Цвет, который будет показан при выделении панели.

    • Пример:

      highlightColor: Colors.green // Зеленый цвет при выделении

Заключение

ExpansionPanel — это удобный способ отображения информации, которая может быть скрыта или раскрыта. Он помогает пользователям лучше организовать информацию и легко управлять тем, что они хотят видеть. Используя настройки ExpansionPanel, вы можете адаптировать его внешний вид и поведение в соответствии с потребностями вашего приложения.

PreviousBottomSheetNextSnackBar

Last updated