关于Flutter响应式网站中的抽屉显示

to94eoyn  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(106)

当我点击抽屉图标时,它不显示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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
nzk0hqpo

nzk0hqpo1#

一个drawer需要在scaffold级别定义,你只需要在onPressed中创建一个Drawer小部件,它不做任何事情。导航栏onPressed将调用scaffold上下文的openDrawer
Scaffold.of(context).openDrawer()
你必须确保你的导航栏小部件是脚手架的孩子。

相关问题