Flutter定制弹窗菜单需求：渐变背景、特殊样式及滚动功能

要实现你需要的渐变背景、特殊样式菜单项及滚动功能，PopupMenuButton的默认样式确实不够灵活，推荐使用showMenu结合自定义布局来实现，以下是完整代码和关键说明：

import 'package:flutter/material.dart';

class CustomPopupMenuDemo extends StatefulWidget {
  const CustomPopupMenuDemo({super.key});

  @override
  State<CustomPopupMenuDemo> createState() => _CustomPopupMenuDemoState();
}

class _CustomPopupMenuDemoState extends State<CustomPopupMenuDemo> {
  // 菜单选项列表，可根据实际需求修改
  final List<String> menuItems = [
    "选项1",
    "选项2",
    "中间特殊选项",
    "选项4",
    "选项5",
    "选项6",
    "选项7",
    "选项8"
  ];
  // 标记特殊样式的菜单项索引
  final int specialItemIndex = 2;

  void _displayCustomMenu(BuildContext context) async {
    final buttonRenderBox = context.findRenderObject() as RenderBox;
    final overlayRenderBox = Overlay.of(context).context.findRenderObject() as RenderBox;
    // 计算菜单显示位置，确保在按钮正下方
    final menuPosition = RelativeRect.fromRect(
      Rect.fromPoints(
        buttonRenderBox.localToGlobal(Offset.zero, ancestor: overlayRenderBox),
        buttonRenderBox.localToGlobal(buttonRenderBox.size.bottomRight(Offset.zero), ancestor: overlayRenderBox),
      ),
      Offset.zero & overlayRenderBox.size,
    );

    await showMenu(
      context: context,
      position: menuPosition,
      elevation: 0,
      // 清除默认菜单样式，避免和自定义布局冲突
      menuStyle: const MenuStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.transparent),
        shadowColor: MaterialStatePropertyAll(Colors.transparent),
        surfaceTintColor: MaterialStatePropertyAll(Colors.transparent),
        padding: MaterialStatePropertyAll(EdgeInsets.zero),
      ),
      items: [], // 留空，使用builder自定义菜单内容
      builder: (context) {
        return Container(
          width: buttonRenderBox.size.width, // 和按钮宽度保持一致
          decoration: BoxDecoration(
            // 自定义渐变背景，可修改颜色和方向
            gradient: const LinearGradient(
              colors: [Color(0xFFE1F5FE), Color(0xFFF3E5F5)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: ConstrainedBox(
            // 限制菜单最大高度，超过后自动滚动
            constraints: const BoxConstraints(maxHeight: 300),
            child: ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              itemCount: menuItems.length,
              itemBuilder: (context, index) {
                final isSpecialItem = index == specialItemIndex;
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  // 特殊菜单项添加边框和背景
                  decoration: isSpecialItem
                      ? BoxDecoration(
                          border: Border.all(color: Colors.deepPurple, width: 2),
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.white.withOpacity(0.8),
                        )
                      : null,
                  child: Text(
                    menuItems[index],
                    style: TextStyle(
                      fontSize: 16,
                      // 特殊菜单项加粗字体
                      fontWeight: isSpecialItem ? FontWeight.bold : FontWeight.normal,
                      color: isSpecialItem ? Colors.deepPurple : Colors.black87,
                    ),
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义弹窗菜单")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _displayCustomMenu(context),
          child: const Text("打开菜单"),
        ),
      ),
    );
  }
}

关键实现说明 #

1. 菜单位置控制：通过RelativeRect计算按钮在Overlay中的位置，确保菜单精准显示在按钮正下方。
2. 渐变背景：在菜单外层Container的decoration中设置LinearGradient，可自由调整渐变颜色、方向和起止点。
3. 滚动支持：用ConstrainedBox限制菜单最大高度，内部嵌套ListView.builder，当菜单项数量超过高度限制时自动滚动。
4. 特殊菜单项样式：通过索引判断特殊项，单独设置边框、背景色和加粗字体，满足你的样式需求。
5. 清除默认样式：在menuStyle中清除默认的背景、阴影等样式，避免和自定义布局冲突。

内容的提问来源于stack exchange，提问作者eternal dating