app-zj/lib/widget/card_item.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lszlgl/config/colors.dart';
import 'package:lszlgl/ext/value_notifier_ext.dart';

import '../config/pics.dart';
import '../router/my_navigator.dart';

class CardItemWidget extends StatelessWidget {
  /// 标题文本
  final String title;

  /// 左侧icon
  final Widget? leading;

  /// 右侧icon
  final Widget? trailing;

  /// 右侧文本
  final String? rightText;
  final String? hint;

  /// 自定义右侧组件
  final Widget? rightChild;

  /// 右侧组件对齐方式
  final AlignmentGeometry rightAlign;
  final bool showTopLine;
  final bool bottomLine;

  /// 点击事件
  final VoidCallback? onTap;

  final Color? backgroundColor;

  const CardItemWidget(
    this.title, {
    Key? key,
    this.leading,
    this.trailing,
    this.rightText,
    this.hint,
    this.rightChild,
    this.onTap,
    this.rightAlign = Alignment.centerRight,
    this.showTopLine = false,
    this.bottomLine = false,
    this.backgroundColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          showTopLine ? const Divider(color: Color(0xFFF3F3F3), height: 0, thickness: 1) : const SizedBox.shrink(),
          Container(
            constraints: const BoxConstraints(minHeight: 48),
            padding: const EdgeInsets.all(12),
            color: backgroundColor,
            child: Row(
              children: [
                buildLeading(),
                buildTitle(),
                const SizedBox(width: 4),
                buildRight(),
                buildTrailing(),
              ],
            ),
          ),
          bottomLine ? const Divider(color: Color(0xFFF3F3F3), height: 0, thickness: 1) : const SizedBox.shrink(),
        ],
      ),
    );
  }

  Widget buildLeading() {
    if (leading == null) return const SizedBox.shrink();
    return Padding(
      padding: const EdgeInsets.only(right: 8),
      child: leading,
    );
  }

  Widget buildTrailing() {
    if (trailing == null) return const SizedBox.shrink();
    return Padding(
      padding: const EdgeInsets.only(left: 8),
      child: trailing,
    );
  }

  Widget buildTitle() {
    return Expanded(
      child: Text(
        title,
        style: const TextStyle(
          color: Color(0xFF333333),
          fontSize: 14,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }

  Widget buildRight() {
    Widget child;
    if (rightChild != null) {
      child = rightChild!;
    } else {
      child = Text(
        (rightText?.isNotEmpty ?? false) ? rightText! : hint ?? '',
        textAlign: TextAlign.right,
        style: TextStyle(
          color: (rightText?.isNotEmpty ?? false) ? const Color(0xFF01B2C8) : MyColor.c_666666,
          fontSize: 14,
          fontWeight: FontWeight.w500,
        ),
      );
    }
    return Expanded(
      child: Container(
        alignment: rightAlign,
        child: child,
      ),
    );
  }
}

class CardItemMenuWidget extends StatelessWidget {
  /// 标题文本
  final String title;

  /// 左侧icon
  final Widget? leading;

  final String? hint;

  /// 右侧组件对齐方式
  final AlignmentGeometry rightAlign;
  final bool showTopLine;
  final bool bottomLine;

  final Color? backgroundColor;
  final Color? menuColor;

  final ValueNotifier<List<CardMenuData>> listNotifier;
  final ValueNotifier<CardMenuData?> selNotifier;

  final void Function(ValueNotifier<CardMenuData?>, CardMenuData)? onSelectTap;

  const CardItemMenuWidget(
    this.title,
    this.listNotifier,
    this.selNotifier, {
    Key? key,
    this.leading,
    this.hint,
    this.rightAlign = Alignment.centerRight,
    this.showTopLine = false,
    this.bottomLine = false,
    this.backgroundColor = Colors.white,
    this.menuColor = Colors.white,
    this.onSelectTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CardItemWidget(
      title,
      leading: leading,
      rightAlign: rightAlign,
      showTopLine: showTopLine,
      bottomLine: bottomLine,
      backgroundColor: backgroundColor,
      rightChild: buildMenu(),
    );
  }

  Widget buildMenu() {
    return listNotifier.builder(
      (list) => selNotifier.builder(
        (selData) {
          return MenuAnchor(
            style: MenuStyle(
                padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                alignment: Alignment.bottomRight,
                surfaceTintColor: MaterialStatePropertyAll(menuColor),
                elevation: const MaterialStatePropertyAll(16),
                shape: const MaterialStatePropertyAll(RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16)),
                ))),
            builder: (_, ctrl, __) => buildMenuLabel(ctrl, selData),
            menuChildren: List.generate(list.length, (index) {
              return buildMenuItem(list[index], selData);
            }).toList(),
          );
        },
      ),
    );
  }

  /// 菜单栏
  Widget buildMenuLabel(MenuController ctrl, CardMenuData? selData) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        if (listNotifier.value.isEmpty) {
          MyNavigator.showToast('没有选项数据');
          return;
        }
        if (ctrl.isOpen) {
          ctrl.close();
        } else {
          ctrl.open();
        }
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: Text(
              selData?.name ?? '',
              textAlign: TextAlign.right,
              style: const TextStyle(
                color: Color(0xFF01B2C8),
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          const SizedBox(width: 8),
          Image.asset(imgItemArrowDown, width: 20),
        ],
      ),
    );
  }

  Widget buildMenuItem(CardMenuData item, CardMenuData? selData) {
    return MenuItemButton(
      onPressed: () {
        if (item.value == selData?.value) return;
        selNotifier.value = item;
        onSelectTap?.call(selNotifier, item);
      },
      child: Container(
        constraints: const BoxConstraints(minWidth: 120),
        alignment: Alignment.center,
        child: Text(
          item.name ?? '',
          style: TextStyle(color: item.value == selData?.value ? const Color(0xFF01B2C8) : MyColor.c_666666),
        ),
      ),
    );
  }
}

class CardMenuData {
  String? name;
  dynamic value;

  CardMenuData(this.name, this.value);
}

class CardWidgets {
  CardWidgets._();

  static Widget buildEdit(
    bool isDetail,
    String title,
    String? value, {
    String? hint = '点击填写',
    TextInputType? inputType,
    ValueChanged<String>? onChanged,
    List<TextInputFormatter>? formatters,
    Color? backgroundColor = Colors.white,
  }) {
    if (isDetail) {
      return CardItemWidget(
        title,
        rightText: value,
        bottomLine: true,
        backgroundColor: backgroundColor,
      );
    }
    return CardItemWidget(
      title,
      rightChild: TextField(
        controller: TextEditingController(text: value),
        keyboardType: inputType,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
          hintText: hint,
          hintStyle: const TextStyle(color: MyColor.c_666666, fontSize: 14),
          border: InputBorder.none,
          contentPadding: EdgeInsets.zero,
          isDense: true,
        ),
        style: const TextStyle(color: Color(0xFF01B2C8), fontSize: 14, fontWeight: FontWeight.w500),
        textInputAction: TextInputAction.next,
        inputFormatters: formatters,
        onChanged: onChanged,
      ),
      backgroundColor: backgroundColor,
      bottomLine: true,
    );
  }

  static Widget buildDate(
    bool isDetail,
    String title,
    ValueNotifier<String?> notifier, {
    String? Function(DateTime?)? onResult,
    DateTime? firstDate,
    DateTime? lastDate,
  }) {
    return notifier.builder((v) {
      if (isDetail) {
        return CardItemWidget(title, rightText: v, bottomLine: true);
      }
      return CardItemWidget(
        title,
        rightText: v,
        trailing: Image.asset(imgItemArrowDown, width: 20),
        bottomLine: true,
        onTap: () async {
          var date = await showDatePicker(
            context: MyNavigator.navigator.currentState!.context,
            firstDate: firstDate ?? DateTime(2020),
            lastDate: lastDate ?? DateTime.now(),
          );
          if (onResult != null) {
            notifier.value = onResult.call(date);
          }
        },
      );
    });
  }

  static Widget buildMenu(
    bool isDetail,
    String title,
    ValueNotifier<List<CardMenuData>> listNotifier,
    ValueNotifier<CardMenuData?> selNotifier,
    void Function(ValueNotifier<CardMenuData?>, CardMenuData)? onSelectTap,
  ) {
    if (isDetail) {
      return selNotifier.builder(
        (v) => CardItemWidget(
          title,
          rightText: v?.name,
          bottomLine: true,
        ),
      );
    }
    return CardItemMenuWidget(
      title,
      listNotifier,
      selNotifier,
      onSelectTap: onSelectTap,
      bottomLine: true,
    );
  }
}