Flutter抽屉（Drawer）内ListView无内容显示问题求助

核心问题在于你的抽屉组件错误地返回了一个Scaffold，而Drawer本身应该作为父页面Scaffold的drawer属性值，而非单独封装成带Scaffold的组件。这种嵌套会导致ListView内容无法被正确渲染和触发显示。

修复步骤： #

1. 重构抽屉组件（正确写法） #

让MainDrawer直接返回Drawer组件，去掉外层多余的Scaffold：

class MainDrawer extends StatefulWidget {
  const MainDrawer({super.key});

  @override
  _MainDrawerState createState() => _MainDrawerState();
}

class _MainDrawerState extends State<MainDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.cyan,
            ),
            child: Text(
              'DBug',
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          ListTile(
            title: const Text('item 1'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('item 2'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

2. 在父页面中正确使用抽屉 #

在你的主页面Scaffold中，将MainDrawer赋值给drawer属性：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页面')),
      drawer: const MainDrawer(), // 这里引用你的抽屉组件
      body: const Center(child: Text('主内容区域')),
    );
  }
}

额外说明 #

• 控制台无报错是因为代码语法合法，但逻辑错误导致组件未被正确挂载到页面层级中
• 无论使用StatelessWidget还是StatefulWidget，只要嵌套Scaffold的问题不解决，ListView都无法正常显示

内容的提问来源于stack exchange，提问作者SgtPepega