Flyinsono/lib/lab/components/control_panel_item/control_item_slider.dart

import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/utils/common_util.dart';
import 'package:flyinsono/architecture/utils/prompt_box.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';

// 控制面板-滑块控制器
class ControlItemSlider extends StatefulWidget {
  const ControlItemSlider({
    super.key,
    required this.itemText,
    required this.minValue,
    required this.maxValue,
    required this.currentValue,
    this.onChanged,
  });
  final String itemText;
  final int minValue;
  final int maxValue;
  final int currentValue;
  final ValueChanged<int>? onChanged;

  @override
  State<ControlItemSlider> createState() => _ControlItemSliderState();
}

class _ControlItemSliderState extends State<ControlItemSlider> {
  late int _currentValue;

  @override
  void initState() {
    super.initState();
    _currentValue = widget.currentValue;
  }

  @override
  void didUpdateWidget(ControlItemSlider oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.currentValue != _currentValue) {
      _currentValue = widget.currentValue;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: LabColors.base200,
        borderRadius: BorderRadius.circular(3),
        border: Border.all(
          color: LabColors.base400,
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            widget.itemText,
            style: TextStyle(
              fontSize: 14,
              height: 1,
              color: LabColors.text700,
            ),
          ),
          SizedBox(
            height: 2,
          ),
          Row(
            children: [
              Material(
                color: Colors.transparent,
                child: Container(
                  margin: const EdgeInsets.only(left: 5),
                  child: InkWell(
                    borderRadius: BorderRadius.circular(3),
                    hoverColor: LabColors.base400,
                    onTap: () {
                      if (_currentValue == widget.minValue) {
                        PromptBox.toast('已达最小值！');
                        return;
                      }
                      setState(() {
                        _currentValue = (_currentValue - 1)
                            .clamp(widget.minValue, widget.maxValue);
                      });
                      widget.onChanged?.call(_currentValue);
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 4),
                      child: Icon(
                        Icons.keyboard_arrow_left_rounded,
                        color: LabColors.base800,
                        size: 28,
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: SliderTheme(
                  data: SliderThemeData(
                    trackHeight: 8,
                    thumbShape: const RoundSliderThumbShape(
                      enabledThumbRadius: 12,
                      elevation: 3,
                      pressedElevation: 3,
                    ),
                    overlayShape: const RoundSliderOverlayShape(
                      overlayRadius: 0,
                    ),
                    thumbColor: LabColors.base600,
                    overlayColor: Colors.transparent,
                    activeTrackColor: LabColors.base500,
                    inactiveTrackColor: LabColors.base100,
                    activeTickMarkColor: LabColors.base400,
                    inactiveTickMarkColor: LabColors.base400,
                  ),
                  child: Slider(
                    value: _currentValue.toDouble(),
                    min: widget.minValue.toDouble(),
                    max: widget.maxValue.toDouble(),
                    divisions: widget.maxValue - widget.minValue,
                    // activeColor: LabColors.base600,
                    // inactiveColor: LabColors.base100,
                    onChanged: (double value) {
                      setState(() {
                        _currentValue = value.round();
                      });
                      CommonUtil.debounce(
                        () {
                          widget.onChanged?.call(_currentValue);
                        },
                        durationTime: 800,
                      );
                    },
                  ),
                ),
              ),
              Material(
                color: Colors.transparent,
                child: Container(
                  margin: const EdgeInsets.only(right: 5),
                  child: InkWell(
                    borderRadius: BorderRadius.circular(3),
                    hoverColor: LabColors.base400,
                    onTap: () {
                      if (_currentValue == widget.maxValue) {
                        PromptBox.toast('已达最大值！');
                        return;
                      }
                      setState(() {
                        _currentValue = (_currentValue + 1)
                            .clamp(widget.minValue, widget.maxValue);
                      });
                      widget.onChanged?.call(_currentValue);
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 4),
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: LabColors.base800,
                        size: 28,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 5,
          )
        ],
      ),
    );
  }
}