0

我正在尝试将背景图像添加到我的主题数据中，但我无法管理在何处添加它，我的代码如下所示。请帮忙。谢谢！

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Q App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff145C9E),
        scaffoldBackgroundColor: Color(0xff1F1F1F),
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: Home.id,
      routes: {
        Home.id: (context) => Home(),
        Login.id: (context) => Login(),
        SignUp.id: (context) => SignUp(),
        RegisterAgree.id: (context) => RegisterAgree(),
        HomeInApp.id: (context) => HomeInApp(),
      },
      //home: Home(),
    );
  }
}
4

2 回答 2

0

据我所知，目前没有使用 themeData 设置默认背景图像的方法。由于 backgroundImage 不是 themeData 的构造函数值，因此目前不可用。您可以设置背景颜色或脚手架背景颜色，但这对您没有帮助。我建议制作一个带有背景图像的自定义脚手架小部件，并将其应用于所有需要的情况。如果您愿意，您甚至可以将其包裹在路线中每个页面的小部件周围，但不建议这样做。

如果您不知道如何执行此操作，那么我会在这里查看类似的答案：如何在 Flutter 中设置背景图像？

我还会查看 Flutter 组合文档。

于 2021-03-25T13:57:49.437 回答
0

我在 ThemeData 中找不到任何可以设置默认背景图像的属性，而且我认为 Material 库没有提供这样的功能。现在你可以做的是你可以创建自己的容器包装器来获得预期的结果。

以下是没有图像的默认代码：

下面是添加了包装小部件（BodyWithBackgroundImage）的相同代码

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child:  Page1(),
    );
  }
}



class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text("Hello World",style: TextStyle(color: Colors.yellowAccent),),),
    );
  }
}

这里直接返回Page1。现在要为其添加主题，我们可以用另一个小部件包装它，该小部件将为您的页面定义背景图像。

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child:  BodyWithBackgroundImage(child: Page1()),
    );
  }
}



class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text("Hello World",style: TextStyle(color: Colors.yellowAccent),),),
    );
  }
}




class BodyWithBackgroundImage extends StatelessWidget {

  final Widget child;

  BodyWithBackgroundImage({this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('assets/dota.png'),fit: BoxFit.cover),
      ),
      child: child,
    );
  }
}

这样，您不仅可以添加背景图像，还可以添加 BoxDecoration 提供的其他额外功能，例如 Gradient 等。这可以充当主题包装器，而不是每次在每个页面上都定义图像，您可以简单地用你的主题包装小部件。

于 2021-03-25T14:12:37.150 回答