app-starlock/lib/tools/jh_pop_menus.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'screen_utils.dart';

// List _listData = [
//   {'text': '读取记录'},
//   {'text': '清空记录'},
//   {'text': '导出记录'},
// ];

const Color _bgColor = Color(0xFF2D2D2D);
const double _fontSize = 20.0;
const double _cellHeight = 50.0;
const double _imgWH = 22.0;

class JhPopMenus {
  /// 显示pop
  static void show(
    BuildContext context, {
    required List<dynamic> listData,
    Function(int selectIndex, String selectText)? clickCallback,
  }) {
    // Cell
    Widget buildMenuCell(dataArr) {
      return ListView.builder(
        itemCount: dataArr.length,
        itemExtent: _cellHeight.h,
        padding: const EdgeInsets.all(0.0),
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return Material(
            color: _bgColor,
            child: InkWell(
              onTap: () {
                clickCallback?.call(index, listData[index]['text']);
                Navigator.pop(context);
              },
              child: Row(
                children: <Widget>[
                  SizedBox(width: 25),
                  // Image.asset(dataArr[index]['icon'], width: _imgWH, height: _imgWH, color: Colors.white),
                  // const SizedBox(width: 15),
                  Text("你好",
                      style: TextStyle(
                          color: Colors.white, fontSize: _fontSize.sp)),
                ],
              ),
            ),
          );
        },
      );
    }

    Widget menusView(dataArr) {
      var cellH = dataArr.length * _cellHeight.h;
      var navH = JhScreenUtils.navigationBarHeight;
      return Positioned(
        right: 10,
        top: navH - 10,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Image.asset('images/ic_menu_up_arrow.png', width: 28, height: 5),
            ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Container(
                  color: _bgColor,
                  width: 160,
                  height: cellH,
                  child: buildMenuCell(dataArr)),
            )
          ],
        ),
      );
    }

    Navigator.of(context)
        .push(DialogRouter(_BasePopMenus(child: menusView(listData))));
  }

  /// 显示带线带背景 pop
  static void showLinePop(
    BuildContext context, {
    bool isShowBg = false,
    required List<dynamic> listData,
    Function(int selectIndex, String selectText)? clickCallback,
  }) {
    // 带线
    Widget buildMenuLineCell(dataArr) {
      return ListView.separated(
        itemCount: dataArr.length,
        padding: const EdgeInsets.all(0.0),
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return Material(
            color: _bgColor,
            child: InkWell(
              onTap: () {
                clickCallback?.call(index, listData[index]['text']);
                Navigator.pop(context);
              },
              child: SizedBox(
                height: _cellHeight.h,
                // padding: EdgeInsets.only(left: 20.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    // const SizedBox(width: 25),
                    // Image.asset(dataArr[index]['icon'], width: _imgWH, height: _imgWH, color: Colors.white),
                    // const SizedBox(width: 12),
                    Center(
                        child: Text(dataArr[index]['text'],
                            style: TextStyle(
                                color: Colors.white, fontSize: _fontSize.sp)))
                  ],
                ),
              ),
            ),
          );
        },
        separatorBuilder: (context, index) => Divider(
            height: .1,
            indent: 20.w,
            endIndent: 20.w,
            color: Color(0xFFE6E6E6)),
      );
    }

    Widget menusView(dataArr) {
      var cellH = dataArr.length * _cellHeight.h;
      var navH = JhScreenUtils.navigationBarHeight;
      if (isShowBg == true) {
        navH = navH - JhScreenUtils.topSafeHeight;
      } else {
        navH = navH - 10;
      }
      return Positioned(
        right: 10,
        top: navH,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Image.asset('images/ic_menu_up_arrow.png', width: 28, height: 5),
            ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: Container(
                    color: _bgColor,
                    width: 180.w,
                    height: cellH,
                    child: buildMenuLineCell(dataArr)))
          ],
        ),
      );
    }

    if (isShowBg == true) {
      // 带背景
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return _BasePopMenus(child: menusView(listData));
        },
      );
    } else {
      Navigator.of(context)
          .push(DialogRouter(_BasePopMenus(child: menusView(listData))));
    }
  }
}

class _BasePopMenus extends Dialog {
  final child;

  const _BasePopMenus({
    Key? key,
    this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          GestureDetector(onTap: () => Navigator.pop(context)),
          // 内容
          child ?? Container()
        ],
      ),
    );
  }
}

class DialogRouter extends PageRouteBuilder {
  final Widget page;

  DialogRouter(this.page)
      : super(
          opaque: false,
          // 自定义遮罩颜色
          barrierColor: Colors.white10.withAlpha(1),
          transitionDuration: const Duration(milliseconds: 150),
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) =>
              child,
        );
}

class CustomDialog extends Dialog {
  final bool clickBgHidden;
  final child;

  const CustomDialog({
    Key? key,
    this.child,
    this.clickBgHidden = false, // 点击背景隐藏，默认不隐藏
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      // 透明层
      type: MaterialType.transparency,
      child: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              if (clickBgHidden == true) {
                Navigator.pop(context);
              }
            },
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
            ),
          ),
          // 内容
          Center(child: child)
        ],
      ),
    );
  }
}