在 Flutter 中使用永久背景图像答案

【问题标题】：Using a permanent background image with Flutter在 Flutter 中使用永久背景图像
【发布时间】：2018-09-21 15:50:55
【问题描述】：

我正在开发一个具有 2 个选项卡视图的应用程序，并且想要一个永久的背景图像，同时能够在 2 个选项卡之间滑动或导航。这是小部件的代码：

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {

  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = new TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Divot', style: new TextStyle(fontFamily: 'Pacifico')),
        centerTitle: true,
        backgroundColor: Colors.green,
        bottom: new TabBar(
          controller: controller,
            tabs: <Tab>[
              new Tab(icon: new Icon(Icons.golf_course)),
              new Tab(icon: new Icon(Icons.account_circle)),
            ]),
      ),
      body: new Stack(
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(image: new AssetImage("image"), fit: BoxFit.fill,),
            ),
          ),
          new TabBarView(
            controller: controller,
              children: <Widget>[
                new second.GameMenu(),
                new third.MyProfilePage(),
              ],
          )
        ],
      )
    );
  }
}

我没有收到任何错误，但我在第一个选项卡上得到了白色背景，在第二个选项卡上得到了我的 AssetImage 背景。我错过了什么？

【问题讨论】：

标签： image user-interface flutter

【解决方案1】：

我知道这是一个老问题，但以防万一......

通过使用 Container 作为 Scaffold body: 并让 TabBarView 成为 Container 的子项，我得到了您想要的效果。然后你可以使用...

decoration: BoxDecoration(
            image: DecorationImage(
              image:
                  AssetImage("some image path"),
              fit: BoxFit.cover,
              colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.4), BlendMode.dstATop),

创建出现在每个选项卡视图上的背景:-)

【讨论】：

【解决方案2】：

在 Android 中这会容易得多，您所要做的就是在 XML 文件中设置背景属性，就这么简单。

在颤振中，我建议在 Scaffold 的 body 属性中，在 TabBarView 子项中，您可以尝试传递带有背景的小部件。或者尝试将大多数小部件的backgroundColor 属性设置为Colors.transparent。

【讨论】：