164 lines
4.8 KiB
Dart
Executable File
164 lines
4.8 KiB
Dart
Executable File
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();
|
||
// },
|
||
)
|
||
],
|
||
);
|
||
}
|
||
}
|