app-starlock/lib/tools/menuItem/xsDropDownWidget.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/app_settings/app_colors.dart';
import 'package:star_lock/tools/menuItem/dropDownItem.dart';

/// @author baorant
/// @创建时间：2024/4/11
/// 下拉菜单按钮组件
class XSDropDownWidget extends StatefulWidget {
  XSDropDownWidget(
      {Key? key,
      required this.items,
      this.value,
      this.valueChanged,
      this.title,
      this.tooltip = '点击选择'})
      : super(key: key);
  // 显示的菜单项
  List<DropDownItem> items = [];
  // 当前选中的值
  final dynamic value;
  // 选择框前的标题
  final String? title;
  // 提示语
  String tooltip = '点击选择'.tr;
  // 选中数据的回调事件
  final ValueChanged<dynamic>? valueChanged;

  @override
  State<XSDropDownWidget> createState() => _XSDropDownWidgetState();
}

class _XSDropDownWidgetState extends State<XSDropDownWidget> {
  String label = '请选择';
  // 是否展开下拉按钮
  bool isExpand = false;
  // 当前的值
  dynamic currentValue;

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

  /// 根据当前的value处理当前文本显示
  void initTitle() {
    if (currentValue != null) {
      // 有值查值
      for (DropDownItem item in widget.items) {
        if (item.itemValue == currentValue) {
          label = item.itemTitle;
          return;
        }
      }
    }
    // 没值默认取第一个
    if (widget.items.isNotEmpty) {
      label = widget.items[0].itemTitle;
    }
  }

  @override
  Widget build(BuildContext context) {
    initTitle();
    return Wrap(
      children: [
        if (widget.title != null)
          Text(widget.title!,
              style: TextStyle(
                fontSize: 26.sp,
                color: Colors.black,
                fontWeight: FontWeight.w600,
              )),
        PopupMenuButton<String>(
          color: Colors.white,
          // initialValue: currentValue,
          tooltip: widget.tooltip,
          offset: const Offset(0, 30),
          enableFeedback: true,
          child: Listener(
            // 使用listener事件能够继续传递
            onPointerDown: (event) {
              setState(() {
                isExpand = !isExpand;
              });
            },
            child: Wrap(
              children: [
                Text(
                  label,
                  style: TextStyle(
                    fontSize: 24.sp,
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                isExpand
                    ? const Icon(Icons.arrow_drop_up)
                    : const Icon(Icons.arrow_drop_down)
              ],
            ),
          ),
          onSelected: (value) {
            widget.valueChanged?.call(value);
            setState(() {
              currentValue = value;
              isExpand = !isExpand;
            });
          },
          onCanceled: () {
            // 取消展开
            setState(() {
              isExpand = false;
            });
          },
          itemBuilder: (context) {
            return widget.items.map((item) {
              return PopupMenuItem<String>(
                value: item.itemValue,
                child: Container(
                  margin:
                      EdgeInsets.only(left: 0.w, right: 0, top: 0, bottom: 0),
                  // color: item.itemValue == currentValue
                  //     ? AppColors.mainColor
                  //     : null, // 设置选中项背景色为蓝色
                  child: Text(
                    item.itemTitle,
                    style: TextStyle(
                      fontSize: 24.sp,
                      color: item.itemValue == currentValue
                          ? AppColors.mainColor
                          : Colors.black, // 设置选中项文字颜色为白色
                    ),
                  ),
                ),
              );
            }).toList();
          },
          // itemBuilder: (context) {
          //   return widget.items
          //       .map(
          //         (item) => item.itemValue == currentValue
          //             ? PopupMenuItem<String>(
          //                 value: item.itemValue,
          //                 child: Text(
          //                   item.itemTitle,
          //                   style: TextStyle(color: AppColors.mainColor),
          //                 ),
          //               )
          //             : PopupMenuItem<String>(
          //                 value: item.itemValue,
          //                 child: Text(item.itemTitle),
          //               ),
          //       )
          //       .toList();
          // },
        )
      ],
    );
  }
}