Flutter项目中AppBar与背景颜色不显示问题求助

• 核心问题：你的MaterialApp的home属性设置为const HomePage()，但实际应该使用RootPage——RootPage包含了带有蓝色AppBar和默认白色背景的Scaffold，而当前HomePage大概率没有正确包裹在Scaffold组件中，导致页面背景为Flutter默认的黑色。

• 修复步骤：

  1. 修改MyApp中的home参数，将const HomePage()替换为const RootPage()
  2. 确认RootPage的body已设置为const HomePage()（你的代码里这部分已经配置正确，无需改动）

• 修复后的完整代码：

import 'package:flutter/material.dart';

import 'home_page.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const RootPage(), // 此处修改为RootPage
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('One Hour Youtube'),
      ),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint('Floating Action Button');
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onDestinationSelected: (int index) {
          setState(() {
            currentPage = index;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}

• 额外检查：如果修改后仍有问题，可检查HomePage内部是否自行设置了黑色背景，确保它是作为Scaffold的body内容正常渲染的。

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