如何配置MenuAnchor实现全屏宽度的下拉框？

直接设置double.infinity无法让MenuAnchor的下拉框铺满屏幕，是因为菜单容器的布局默认会受到内部约束限制，需要主动获取屏幕宽度并强制设置给下拉内容组件：

1. 通过MediaQuery获取当前屏幕的宽度
2. 给下拉菜单的根组件设置固定宽度为屏幕宽度
3. 配合LayoutBuilder确保布局上下文能正确获取屏幕参数

示例代码：

MenuAnchor(
  builder: (context, controller, child) {
    return ElevatedButton(
      onPressed: () => controller.isOpen ? controller.close() : controller.open(),
      child: const Text('打开全屏下拉菜单'),
    );
  },
  menuChildren: [
    LayoutBuilder(
      builder: (context, constraints) {
        final screenWidth = MediaQuery.of(context).size.width;
        // 若需适配安全区域，可调整宽度：screenWidth - MediaQuery.of(context).padding.left - MediaQuery.of(context).padding.right
        return SizedBox(
          width: screenWidth,
          child: Container(
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text('选项1'),
                SizedBox(height: 8),
                Text('选项2'),
                SizedBox(height: 8),
                Text('选项3'),
              ],
            ),
          ),
        );
      },
    ),
  ],
)

如果需要下拉框从屏幕边缘开始显示（无默认偏移），还可以调整MenuAnchor的menuStyle，设置padding为EdgeInsets.zero：

MenuAnchor(
  menuStyle: MenuStyle(
    padding: MaterialStateProperty.all(EdgeInsets.zero),
  ),
  // 其余代码同上
)

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