这就是问题所在：
网址：
手机：
如您所见，Web应用程序的宽度与移动应用程序的宽度不同，如何通过与移动应用程序相同的显示菜单设计来调整Web应用程序的宽度，使其准确？
这是我的密码
responsive.dart
import 'package:flutter/material.dart';
class ResponsiveWeb extends StatelessWidget {
final Widget child;
const ResponsiveWeb({super.key, required this.child});
@override
Widget build(BuildContext context) {
return Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 600,),
child: child,
),
);
}
}appbar.dart
@override
Widget build(BuildContext context) {
return ResponsiveWeb(
child: SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 255, 202, 55),
title: ResponsiveWeb(
child: Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, right: 0),
child: Row(
children: [
const Icon(
FontAwesomeIcons.checkDouble,
size: 24,
color: const Color(0xff3B3B3B),
),
Text.rich(
TextSpan(
text: ' pomo',
style: GoogleFonts.nunito(
fontSize: 24,
color: const Color(0xff3B3B3B),
fontWeight: FontWeight.w700),
children: <TextSpan>[
TextSpan(
text: 'work',
style: GoogleFonts.nunito(
fontSize: 24,
color: const Color(0xff3B3B3B),
decoration: TextDecoration.underline,
decorationThickness: 3,
fontWeight: FontWeight.w700),
),
TextSpan(
text: 'o.com',
style: GoogleFonts.nunito(
fontSize: 24,
color: const Color(0xff3B3B3B),
fontWeight: FontWeight.w700),
),
],
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 0),
child: Row(
children: [
Tooltip(
message: 'Settings',
child: Semantics(
label: 'Pomodoro timer settings',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Color(0xff3B3B3B),
size: 24,
semanticLabel: 'Pomodoro timer Settings',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SettingsUIPomodoro()),
);
},
),
),
),
Tooltip(
message: 'Profile',
child: Semantics(
label: 'Pomodoro timer Profile',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.account_circle_outlined,
color: Color(0xff3B3B3B),
size: 24,
semanticLabel: 'Pomodoro timer Profile',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Profile()),
);
},
),
),
),
],
),
)
],
),
),
actions: [
IconButton(
onPressed: () {
showMenu(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
position: const RelativeRect.fromLTRB(1, 80, 0, 0),
items: [
PopupMenuItem(
child: ResponsiveWeb(
child: ListTile(
title: Text(
'Analytics',
style: GoogleFonts.nunito(
color: const Color(0xff3B3B3B),
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
trailing: Icon(
Icons.show_chart_outlined,
color: Color(0xff3B3B3B),
size: 20,
semanticLabel: 'Pomodoro timer Analytics',
),
contentPadding: EdgeInsets.zero,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Text('Analytics')),
);
},
),
),
),
PopupMenuItem(
child: ListTile(
title: Text(
'Daily goals',
style: GoogleFonts.nunito(
color: const Color(0xff3B3B3B),
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
trailing: Icon(
Icons.military_tech_outlined,
color: Color(0xff3B3B3B),
size: 20,
semanticLabel: 'Pomodoro timer Daily goals',
),
contentPadding: EdgeInsets.zero,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Text('Daily goals')),
);
},
),
),
]);
},
icon: Tooltip(
message: 'More',
child: Semantics(
label: 'Pomodoro timer More',
enabled: true,
readOnly: true,
child: const Icon(
Icons.more_vert_outlined,
color: Color(0xff3B3B3B),
size: 24,
semanticLabel: 'Pomodoro timer More',
),
),
),
),
],我试图将显示菜单小部件 Package 在响应的Web小部件中，但它抛出了一个错误，我如何从Web应用程序中修复宽度，并使其看起来像移动应用程序的宽度？
谢谢你能提供的任何帮助
2条答案
按热度按时间pvcm50d11#
您可以使用
GestureDetector来获取全局位置，然后在showMenu的位置上使用它。在顶部创建一个变量（对于statelesswidget在build内部，但是对于stateful on state类在build内部）。然后更好的解决方案是计算renderBox大小。
7kqas0il2#
在responsible.dart中，您将
maxWidth属性设置为max 600。这就是为什么没有全屏显示的原因。希望有帮助。