Question

我正在尝试将背景图像添加到我的主题数据中，但我无法管理在哪里添加它，我的代码看起来像这样。请帮忙。谢谢！

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

Answer 1

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

如果您不知道该怎么做，那么我会在这里查看类似的答案：How do I Set Background image in Flutter?

我还会查看 Flutter 组合文档。

Answer 2

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

下面是没有图片的默认代码：

下面是添加了包装小部件（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 提供的其他额外功能，如渐变等。这可以充当主题包装器，而不是每次在每个页面上定义图像，您可以简单地包装带有主题包装小部件的页面。

如何在颤振中添加背景图像？

2 个答案: