fix(client): 账号菜单改 showMenu 等宽触发器 + 向上弹(修菜单溢出盖内容)

上一版用 PopupMenuButton width:218 + offset:-12 反而把菜单外扩、右缘越过侧栏
盖住内容区。改为 GestureDetector + showMenu,菜单宽度 = 用户区实测宽度(自动与
侧栏内容等宽、绝不溢出),底部空间不足 showMenu 自动向上弹、不遮触发器。
加 user_menu_width_test:点开后断言菜单宽≈194、右缘≤218(弹出态回归)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSKEiHsvauyxYUW2itzUXX
This commit is contained in:
wangjia
2026-06-25 18:40:07 +08:00
parent 15d825125d
commit 0ebf26c282
2 changed files with 139 additions and 17 deletions
+32 -17
View File
@@ -84,6 +84,34 @@ class _AppShellState extends ConsumerState<AppShell> {
bool _forceDialogShown = false;
bool _licenseDialogShown = false;
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
// 侧栏底部用户区,用于实测宽度让弹出菜单等宽 + 定位(向上弹,不溢出内容区)
final GlobalKey _sideUserKey = GlobalKey();
/// 打开账号菜单(个人设置 / 退出登录)。菜单宽度 = 用户区实测宽度(自动与侧栏
/// 内容等宽、绝不溢出到内容区);底部空间不足时 showMenu 自动向上弹。
void _openUserMenu(BuildContext context) {
final t = context.tokens;
final rb = _sideUserKey.currentContext?.findRenderObject() as RenderBox?;
final overlay =
Overlay.of(context).context.findRenderObject() as RenderBox?;
if (rb == null || overlay == null) return;
final topLeft = rb.localToGlobal(Offset.zero, ancestor: overlay);
final rect = topLeft & rb.size;
showMenu<String>(
context: context,
position: RelativeRect.fromRect(rect, Offset.zero & overlay.size),
constraints: BoxConstraints.tightFor(width: rb.size.width),
color: t.menuUserBg,
elevation: 8,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
items: [
_userMenuItem('profile', Icons.manage_accounts_outlined, '个人设置', t),
_userMenuItem('logout', Icons.logout, '退出登录', t),
],
).then((v) {
if (v == 'logout') _logout();
});
}
/// 切换到第 index 个分支;再次点当前栏目则回到该分支初始页。
void _goBranch(int index) {
@@ -286,24 +314,11 @@ class _AppShellState extends ConsumerState<AppShell> {
),
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: PopupMenuButton<String>(
tooltip: '账号菜单',
position: PopupMenuPosition.over,
// 菜单与侧栏等宽(218),左对齐到侧栏左缘(抵消侧栏 12 内边距)
offset: const Offset(-12, -8),
constraints: const BoxConstraints.tightFor(width: 218),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
color: t.menuUserBg,
elevation: 8,
onSelected: (v) {
if (v == 'logout') _logout();
},
itemBuilder: (_) => [
_userMenuItem('profile', Icons.manage_accounts_outlined, '个人设置', t),
_userMenuItem('logout', Icons.logout, '退出登录', t),
],
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => _openUserMenu(context),
child: Container(
key: _sideUserKey,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 9),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),