🧩Slider

Что такое Slider

Slider в Flutter — это элемент интерфейса, который позволяет пользователю выбирать значение из диапазона, перемещая ползунок. Это как регулировка громкости на радиоприемнике: вы можете перетаскивать ползунок влево или вправо, чтобы увеличить или уменьшить громкость.

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

Вот простой пример, как использовать Slider в приложении Flutter:

import 'package:flutter/material.dart';

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

  @override
  _SliderExampleState createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _sliderValue = 0.5; // Текущее значение ползунка

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Slider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slider(
              value: _sliderValue, // Текущее значение
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value; // Обновление значения ползунка
                });
              },
              min: 0.0, // Минимальное значение
              max: 1.0, // Максимальное значение
              divisions: 10, // Разделения для более точного выбора
              label: '${(_sliderValue * 100).round()}%', // Метка для отображения текущего значения
              activeColor: Colors.blue, // Цвет активной части ползунка
              inactiveColor: Colors.grey, // Цвет неактивной части ползунка
            ),
            Text('Value: ${(_sliderValue * 100).round()}%'), // Отображение текущего значения
          ],
        ),
      ),
    );
  }
}

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

  1. Slider: Основной виджет, представляющий ползунок.

  2. value: Значение ползунка, которое будет отображаться. Оно должно находиться в диапазоне между min и max.

  3. onChanged: Функция, вызываемая при изменении значения ползунка. Здесь мы обновляем значение, чтобы отобразить изменения.

  4. setState: Метод, который обновляет интерфейс, когда значение изменяется.

  5. min: Минимальное значение ползунка.

  6. max: Максимальное значение ползунка.

  7. divisions: Определяет, на сколько частей ползунок будет разделен, что позволяет пользователю выбирать только определенные значения.

  8. label: Метка, отображающая текущее значение.

Зачем это нужно

Slider полезен в различных сценариях, например:

  • Регулировка громкости или яркости.

  • Выбор значений, таких как цена или уровень.

  • Настройка параметров в приложениях для настройки.

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

  1. required double value

    • Описание: Текущее значение ползунка. Это обязательный параметр.

    • Пример:

      value: _sliderValue // Текущее значение

  2. double? secondaryTrackValue

    • Описание: Значение для вторичного трека, если это необходимо. Это значение используется для отображения второго ползунка.

    • Пример:

      secondaryTrackValue: 0.7 // Вторичное значение (опционально)

  3. required void Function(double)? onChanged

    • Описание: Функция, вызываемая при изменении значения ползунка. Это обязательный параметр.

    • Пример:

      onChanged: (double value) {
  setState(() {
    _sliderValue = value; // Обновление значения
  });
}

  4. void Function(double)? onChangeStart

    • Описание: Функция, вызываемая, когда начинается изменение значения ползунка.

    • Пример:

      onChangeStart: (double value) {
  print('Начало изменения: $value'); // Обработка начала изменения
}

  5. void Function(double)? onChangeEnd

    • Описание: Функция, вызываемая, когда изменено значение ползунка.

    • Пример:

      onChangeEnd: (double value) {
  print('Изменение закончено: $value'); // Обработка конца изменения
}

  6. double min = 0.0

    • Описание: Минимальное значение ползунка. По умолчанию 0.0.

    • Пример:

      min: 0.0 // Минимальное значение

  7. double max = 1.0

    • Описание: Максимальное значение ползунка. По умолчанию 1.0.

    • Пример:

      max: 1.0 // Максимальное значение

  8. int? divisions

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

    • Пример:

      divisions: 10 // Разделение на 10 частей

  9. String? label

    • Описание: Метка, отображающая текущее значение ползунка.

    • Пример:

      label: '${(_sliderValue * 100).round()}%' // Текущая метка

  10. Color? activeColor

    • Описание: Цвет активной части ползунка.

    • Пример:

      activeColor: Colors.blue // Цвет активной части

  11. Color? inactiveColor

    • Описание: Цвет неактивной части ползунка.

    • Пример:

      inactiveColor: Colors.grey // Цвет неактивной части

  12. Color? secondaryActiveColor

    • Описание: Цвет активной части вторичного трека.

    • Пример:

      secondaryActiveColor: Colors.green // Цвет вторичного активного трека

  13. Color? thumbColor

    • Описание: Цвет ползунка (кружка), который можно перемещать.

    • Пример:

      thumbColor: Colors.red // Цвет ползунка

  14. WidgetStateProperty<Color?>? overlayColor

    • Описание: Цвет наложения при взаимодействии с ползунком.

    • Пример:

      overlayColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
  if (states.contains(MaterialState.hovered)) {
    return Colors.blue.withOpacity(0.5); // Цвет наложения при наведении
  }
  return null; // По умолчанию
}),

  15. MouseCursor? mouseCursor

    • Описание: Курсор мыши при наведении на ползунок.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Курсор при наведении

  16. String Function(double)? semanticFormatterCallback

    • Описание: Функция для форматирования значения для вспомогательных технологий, таких как экранные читалки.

    • Пример:

      semanticFormatterCallback: (double value) => 'Текущее значение: ${value.toStringAsFixed(1)}'

  17. FocusNode? focusNode

    • Описание: Узел фокуса для управления фокусом этого ползунка.

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса

  18. bool autofocus = false

    • Описание: Указывает, должен ли ползунок получать фокус автоматически при создании.

    • Пример:

      autofocus: true // Включить автофокус

  19. SliderInteraction? allowedInteraction

    • Описание: Определяет, какие взаимодействия разрешены с ползунком (например, только по клику или перетаскиванию).

    • Пример:

      allowedInteraction: SliderInteraction.drag // Разрешить только перетаскивание

Заключение

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

PreviousSwitchNextФормы и ввод данных

Last updated