Question

我有一个材质应用程序，该应用程序使用以浅色主题为基础的主题。我将scaffoldBackgroundColor更改为似乎不需要的特定颜色。页面上的背景是黑色而不是灰色。

将应用程序标识为MaterialApp的应用程序的

build（）方法：

Widget build(BuildContext context) {
    return new MaterialApp(
      title: '???',
      theme: appTheme,
      routes: {
        AppRoutes.login: (context) {
          return new LoginPage(
            authenticator: authenticate,
          );
        },
        AppRoutes.home: (context) {
          return new HomePage(
            appState: appState,
            accountRepository: widget.accountRepository,
            authRepository: widget.authRepository,
          );
        },
      },
    );
  }

主题-在这里，我将浅色主题用作新主题的基础，该主题将scaffoldBackgroundColor更改为自定义颜色：

const coolGreyHi = const Color.fromARGB(40,30,20,66);

final ThemeData appTheme = _buildAppTheme();

ThemeData _buildAppTheme() {
  final ThemeData base = new ThemeData.light();
  return base.copyWith(
    scaffoldBackgroundColor: coolGreyHi,
    inputDecorationTheme: new InputDecorationTheme(
      border: new OutlineInputBorder(),
    )
  );
}

背景应为灰色的Page的构建方法：

Widget build(BuildContext context) {
    return new Scaffold(          
      body: new SafeArea(
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.fromLTRB(40.0, 0.0, 40.0, 0.0),
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Image.asset('images/image.png'),
                    new SizedBox(height: 40.0),
                    new TextField(
                      controller: _uidTextController, decoration: new InputDecoration(
                        hintText: "you@yourdomain.com",
                        labelText: "Email Address",
                      ),

                    ),
                    new SizedBox(height: 12.0),
                    new TextField(
                      controller: _pwdTextController, decoration: new InputDecoration(
                        hintText: "Password",
                        labelText: "Password",
                      ),
                    ),
                    new SizedBox(height: 12.0),
                    new ButtonBar(
                      children: <Widget>[
                        new FlatButton(
                          child: new Text("SIGN UP"),
                          onPressed: () {},
                        ),
                        new RaisedButton(
                          child: new Text("SIGN IN"),
                          elevation: 8.0,
                          onPressed: () {
                            authenticator(_uidTextController.text, _pwdTextController.text).then((bool isAuthenticated) {
                              if (isAuthenticated)
                                Navigator.of(context).pushNamedAndRemoveUntil(AppRoutes.home, (Route<dynamic> route) => false);
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ), 
    );
  }

Answer 1

请使用最新的Flutter版本（例如beta或dev）频道。然后，您可以使用backgroundColor上的Scaffold属性，如文档在此处概述：https://docs.flutter.io/flutter/material/Scaffold/backgroundColor.html

Answer 2

我做了进一步检查，似乎有些颜色，即使Flutter调色板中的颜色（例如Colors.black54或Colros.black45）在我的模拟器上也显示为黑色。我尚未在物理设备上对其进行测试。我不确定是显示器还是仿真器以及如何设置问题，但是像Colros.grey这样的颜色确实会正常出现。总而言之，在ThemeData上设置scaffoldBackgroundColor可以按设计工作，但某些颜色可能无法正确显示（即在我的实例中为黑色）。不确定问题出在显示器还是仿真器上。

scaffoldBackgroundColor在Flutter的MaterialApp中似乎无法正确设置颜色

2 个答案: