英文:
About drawer display in flutter responsive website
问题
当我点击抽屉图标时，它不显示ListView（DrawerHeader、Listitems），如何纠正这个问题，这是它的代码。我要如何更改MobileNavbar类，点击抽屉图标来显示内容。（当我点击抽屉图标时，期望的行为是显示一个包含DrawerHeader和项目列表的ListView。然而，当前的代码未实现此功能。要纠正此问题并确保在点击抽屉图标时显示内容，需要对MobileNavbar类进行修改。）
import 'package:flutter/material.dart';
class Navbar extends StatelessWidget {
const Navbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 1200) {
return DesktopNavbar();
} else if (constraints.maxWidth > 800 && constraints.maxWidth < 1200) {
return DesktopNavbar();
} else {
return MobileNavbar();
}
},
);
}
}
class DesktopNavbar extends StatelessWidget {
const DesktopNavbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"RetroPortal Studio",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 30,
),
),
Row(
children: [
const Text("Home", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
const Text("About Us", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
const Text("Portfolio", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
MaterialButton(
color: const Color.fromARGB(255, 235, 53, 113),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
onPressed: () {},
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: Text(
"Get Started",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w500),
),
),
),
],
)
],
),
),
);
}
}
class MobileNavbar extends StatelessWidget {
const MobileNavbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {
// 在此处添加显示抽屉内容的逻辑
Scaffold.of(context).openDrawer();
},
),
const SizedBox(height: 20),
const Text(
"RetroPortal Studio",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 30,
),
),
],
),
),
);
}
}
请注意，在MobileNavbar的onPressed回调中，我添加了 Scaffold.of(context).openDrawer(); 来打开抽屉。你可能需要将这段代码添加到你的应用程序的Scaffold中以使其正常工作。
英文:
when I click the drawer icon, it does not display Listview( DrawerHeader, Listitems), how to correct this problem, This is its code. how I change MobileNavbar class, click the drawer icon to display content. (When I click the drawer icon, the expected behaviour is for it to display a ListView containing a DrawerHeader and a list of items. However, the current code is not achieving this functionality. To correct this problem and ensure that the content is displayed when the drawer icon is clicked, modifications need to be made to the MobileNavbar class.)
import 'package:flutter/material.dart';
class Navbar extends StatelessWidget {
const Navbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 1200) {
return DesktopNavbar();
} else if (constraints.maxWidth > 800 && constraints.maxWidth < 1200) {
return DesktopNavbar();
} else {
return MobileNavbar();
}
},
);
}
}
class DesktopNavbar extends StatelessWidget {
const DesktopNavbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"RetroPortal Studio",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 30,
),
),
Row(
children: [
const Text("Home", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
const Text("About Us", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
const Text("Portfolio", style: TextStyle(color: Colors.white)),
const SizedBox(
width: 30,
),
MaterialButton(
color: const Color.fromARGB(255, 235, 53, 113),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
onPressed: () {},
child: const Padding(
padding:
EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: Text(
"Get Started",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w500),
),
),
),
],
)
],
),
),
);
}
}
class MobileNavbar extends StatelessWidget {
const MobileNavbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Home'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('About Us'),
onTap: () {
Navigator.pop(context);
},
),
],
),
);
},
),
const SizedBox(height: 20),
const Text(
"RetroPortal Studio",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 30,
),
),
],
),
),
);
}
}
答案1
得分: 1
一个抽屉需要在脚手架级别进行定义，你只是在你的onPressed中创建了一个Drawer小部件，它没有执行任何操作。你的导航栏的onPressed应该调用上下文中的Scaffold的openDrawer方法
Scaffold.of(context).openDrawer()
你必须确保你的导航栏小部件是Scaffold的子组件。
英文:
A drawer needs to defined at the scaffold level, you are just make a Drawer widget in your onPressed, which does not do anything. Your navbar onPressed would call the openDrawer on the context of your scaffold
Scaffold.of(context).openDrawer()
where you would have to ensure your navbar widget is a child of Scaffold.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论