使appbar与body颜色相同

Question

我需要使用

AppBar

的属性，但我需要应用栏与主体颜色相同。就好像没有应用栏一样。我对 body 和 appBar 使用了相同的颜色，但 appBar 的颜色更深！

材料应用程序代码：

class MyApp extends StatelessWidget {
  const MyApp();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppName',
      theme: ThemeData(
        backgroundColor: Color(pagesBackgroundColor),
        appBarTheme: AppBarTheme(
          color: Color(pagesBackgroundColor),
        ),
      ),
      home: const HomePage(),
    );
  }
}

首页代码：

class HomePage extends StatelessWidget {
  const HomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(pagesBackgroundColor),
        title: Text(
          "What's up!",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 0.0,
      ),
      body: Column(),
    );
  }
}

Answer 1

将应用栏颜色设置为透明且高度为 0：

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text(
          "What's up!",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 0.0,
      ),
      body: Column(),
    );

Answer 2

我建议完全删除

appBar

并使用对齐小部件将其他小部件放置在页面顶部，就像它是

appBar

一样。

如果您确实删除了

appBar

，请确保将您的支架放置在

SafeArea

小部件内。

我希望这会有所帮助，直到其他人可以展示如何使

appBar

背景颜色不可见。

return SafeArea(
  child: Scaffold(
    body: ListView(
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: TextButton(),
        )
      ],
    ),
  ),
);