flutter - 使用 Material () 或 Scaffold () 小部件时，不透明的样式颜色不起作用

Question

根据下面的代码，定义将应用于布局中所有屏幕的背景图像。

class _LoginWidgetState extends State<LoginWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.asset(
            "assets/img/NewYorkCity.jpeg",
            fit: BoxFit.cover,
          ),
          PageView(
            children: <Widget>[
              SignUpPageWidget(),
              LoginPageWidget(),
              SignInPageWidget(),
            ],
          )
        ],
      ),
    );
  }
}

并且带有 Material 和 Scaffold 小部件的布局未应用样式化 color: Colors.white.withOpacity(0.8) 因此，不显示背景图像。屏幕是白色的，因为背景没有应用不透明度。

class _SignUpPageWidgetState extends State<SignUpPageWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white.withOpacity(0.9),
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.local_taxi,
              size: 50,
              color: Theme.of(context).accentColor,
            ),
            Container(
              width: double.infinity,
              child: Text(
                "Already have an account?",
                textAlign: TextAlign.center,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).accentColor,
                ),
              ),
            ),
            CircleButton(
              label: "Sign Up",
            )
          ],
        ),
      ),
    );
  }
}

移除 Scaffold 或 Material 小部件，应用 color: Colors.white.withOpacity (0.8) 样式化。

class _SignUpPageWidgetState extends State<SignUpPageWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white.withOpacity(0.9),
      padding: EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.local_taxi,
            size: 50,
            color: Theme.of(context).accentColor,
          ),
          Container(
            width: double.infinity,
            child: Text(
              "Already have an account?",
              textAlign: TextAlign.center,
              style: TextStyle(
                decoration: TextDecoration.none,
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
          CircleButton(
            label: "Sign Up",
          )
        ],
      ),
    );
  }
}

您知道如何通过应用这种风格化来使用 Scaffold 和 Material 小部件吗？

Answer 1

将 backgroundColor: Colors.transparent 添加到您的 Scaffold 小部件

对于 Material 添加type:MaterialType.transparency