如何解决如何在颤振中添加背景图像?
我正在尝试将背景图像添加到我的主题数据中,但我无法管理在哪里添加它, 我的代码看起来像这样。请帮忙。谢谢!
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(),);
}
}
解决方法
据我所知,目前没有使用 themeData 设置默认背景图像的方法。由于 backgroundImage 不是 themeData 的构造函数值,因此当前不可用。您可以设置 backgroundColor 或 scaffoldBackgroundColor,但这对您没有帮助。我建议使用背景图像制作自定义 Scaffold Widget,并将其应用于所有需要的情况。如果您愿意,您甚至可以将其包装在路由中每个页面的小部件周围,但不建议这样做。
如果您不知道该怎么做,那么我会在这里查看类似的答案:How do I Set Background image in Flutter?
我还会查看 Flutter 组合文档。
,我在 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 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 提供的其他额外功能,如渐变等。这可以充当主题包装器,而不是每次在每个页面上定义图像,您可以简单地包装带有主题包装小部件的页面。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。