如何 Flutter 背景图像定位答案

【问题标题】：How to Flutter Background Image Positioning如何 Flutter 背景图像定位
【发布时间】：2020-12-06 19:36:54
【问题描述】：

当我在下面与您共享的 main.dart 文件中编写背景图像代码时，我要使用的数据仍保留在 Image 下。我怎么解决这个问题？我知道我在错误的地方写了关于背景的部分，但我不知道在哪里写。感谢您的帮助。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          backgroundColor: Colors.tealAccent,
          appBar: AppBar(
            title: Text('Flutter Weather App'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            //WEATHER DATA
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: weatherData != null
                        ? Weather(weather: weatherData)
                        : Container(),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: isLoading
                        ? CircularProgressIndicator(
                            strokeWidth: 2.0,
                            valueColor:
                                new AlwaysStoppedAnimation(Colors.black),
                          )
                        : IconButton(
                            icon: new Icon(Icons.refresh),
                            tooltip: 'Refresh',
                            onPressed: () async {
                              await loadWeather();
                            },
                            color: Colors.black,
                          ),
                  ),
                ],
              ),
            ),

            //BACKGROUND IMAGE
            Container(
              height: 501.7,
              width: 420.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: isweatherDataLoaded //this
                      ? HandleError()
                      : images["clear"],
                  fit: BoxFit.fill,
                ),
                shape: BoxShape.rectangle,
              ),
            ),

            //FUTURE FORECAST WEATHER DATA
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 200.0,
                  child: forecastData != null
                      ? ListView.builder(
                          itemCount: forecastData.list.length,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) => WeatherItem(
                              weather: forecastData.list.elementAt(index)))
                      : Container(),
                ),
              ),
            )
          ]))),
    );
  }

无论我在哪里写，它都不起作用。我想让你告诉我一个方法。如果你愿意，我可以与你分享我的其余代码。快乐编码！谢谢..

【问题讨论】：

标签： flutter dart mobile

【解决方案1】：

我建议将带有背景图像的容器在层次结构中向上移动，如下所示：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          backgroundColor: Colors.tealAccent,
          appBar: AppBar(
            title: Text('Flutter Weather App'),
          ),
          body: Container(
            height: 501.7,
            width: 420.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: isweatherDataLoaded //this
                    ? HandleError()
                    : images["clear"],
                fit: BoxFit.fill,
              ),
              shape: BoxShape.rectangle,
            ),
            child: Center(
                child: Column(children: <Widget>[
                  //WEATHER DATA
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: weatherData != null
                              ? Weather(weather: weatherData)
                              : Container(),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: isLoading
                              ? CircularProgressIndicator(
                            strokeWidth: 2.0,
                            valueColor:
                            new AlwaysStoppedAnimation(Colors.black),
                          )
                              : IconButton(
                            icon: new Icon(Icons.refresh),
                            tooltip: 'Refresh',
                            onPressed: () async {
                              await loadWeather();
                            },
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ),
                  //FUTURE FORECAST WEATHER DATA
                  SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        height: 200.0,
                        child: forecastData != null
                            ? ListView.builder(
                            itemCount: forecastData.list.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index) => WeatherItem(
                                weather: forecastData.list.elementAt(index)))
                            : Container(),
                      ),
                    ),
                  )
                ])),
          )),
    );
  }

【讨论】：

坦率地说，我不想更改代码。我只想更改这段代码的位置，但我不知道在哪里输入。我试过你抛出的代码，但没有用。
//BACKGROUND IMAGE Container( height: 501.7, width: 420.0, decoration: BoxDecoration( image: DecorationImage( image: isweatherDataLoaded //this ? HandleError() : images["clear"], fit: BoxFit.fill, ), shape: BoxShape.rectangle, ), ),
我已经用你的代码更新了我的答案，只需将带有背景图像的容器设为 body 属性，你的其余代码（从 Center Widget 开始）应该是这个容器的子级。如果您在这样做时遇到任何问题，请告诉我。
容器括号上写着“Try removing the extra positional arguments, or specifying the name for named arguments.”。并在中心显示“Try moving all of the positional arguments before the named arguments.”。你会建议我做什么来解决这些错误？
我复制了您的完整代码并使用 Android Studio 对其进行了测试，但没有出现这些错误。尝试复制我的代码，我编辑了我的原始答案。