当我点击抽屉图标时,它不显示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: () {
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条答案
按热度按时间nzk0hqpo1#
一个drawer需要在scaffold级别定义,你只需要在onPressed中创建一个Drawer小部件,它不做任何事情。导航栏onPressed将调用scaffold上下文的openDrawer
Scaffold.of(context).openDrawer()
你必须确保你的导航栏小部件是脚手架的孩子。