右侧溢出 265 像素的 RenderFlex

Question

我正在尝试从网络获取天气数据，并在 openweathermap 上仅显示 5 天/3 小时 API 的五个索引。当我第一次运行应用程序时它工作正常但是当我单击 Iconbutton 按钮并再次调用 updateUI 时它会给我所有数据而不是五个。这是我的代码：

List<String timeStringData = [];
List<String> hourlyTemp =[];
void updateUI(dynamic weatherData, dynamic hourlyData) {
  setState(() {
    temperature = weatherData['main']['temp'].toInt();
    description = weatherData['weather'][0]['description'];
    cityName = weatherData['name'];
    for (int i = 1; i < 6; i++) {
      timeStringData.add(hourlyData['list'][i]['dt_txt']);
      hourlyTemp.add(hourlyData['list'][i]['main']['temp']);
      parsing();
    }
  });
}

Row parsing() {
  List<HourInfo> hourTexts = [];
  for (int i = 0; i <= timeStringData.length - 1; i++) {
    var parsedDate = DateTime.parse(timeStringData[i]);
    String formatted = formatting(parsedDate);
    String onlyTemp = hourlyTemp[i].toStringAsFixed(0);
    setState(() {
      hourTexts.add(
        HourInfo(
          onlyHour: formatted,
          onlyTemp: onlyTemp,
        ),
      );
    });
  }
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: hourTexts,
  );
}

构建方法：

IconButton(
  icon: Icon(
    Icons.near_me,
    color: Colors.white,
    size: 35.0,
  ),
  onPressed: () async {
    var weatherData = await weather.getLocationWeather();
    var hourlyData = await weather.get3HoursWeather();
    updateUI(weatherData, hourlyData);
  },
),

Container(
  width: double.infinity,
  height: 100.0,
  child: parsing(),
),

Answer 1

我认为您将准备数据与构建小部件树混合在一起。

只需从 updateUI() 方法中删除 parsing(); 调用。 parsing(); 将在构建树时由库调用。

右侧溢出 265 像素的 RenderFlex

A RenderFlex overflowed by 265 pixels on the right

flutter

openweathermap