flutter - 如何 Flutter 背景图像定位

Question

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

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

无论我在哪里写，它都不起作用。我要你给我指路。如果你愿意，我可以与你分享我的其余代码。快乐编码!谢谢..

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