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(),
            ],
          )
        ],
      ),
    );
  }
}

具有“材料”和“脚手架”小部件的布局未应用样式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",
            )
          ],
        ),
      ),
    );
  }
}

删除脚手架或材料小部件，将应用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",
          )
        ],
      ),
    );
  }
}

您是否知道如何通过应用这种样式来使用“脚手架”和“材质”小部件？

Answer 1

将backgroundColor: Colors.transparent添加到您的脚手架小部件中

对于材料，添加type:MaterialType.transparency

使用“材质”（）或“脚手架（）”小部件时，使用不透明的样式设置颜色无效

1 个答案: