我知道这里也发布了类似的问题,但到目前为止,我没有发现任何问题。我是Flutter的初学者,所以我需要一些帮助。我正在尝试构建一个简单的天气应用程序。我想定位一周中的几天和当天的高点/低点,使它们尽可能远离,两边对齐。目前,我的应用程序看起来是这样的(我添加了红色容器以帮助理解(。。一周中的某一天和气温相互拥抱,这正是我试图解决的问题。
我尝试过使用mainAxisAlignment.spaceEvenly、spaceBetween和spaceAround,但它们都不能移动文本。我试过使用Spacer((,但这会使温度消失。
我每天都有一个单独的类要构建,因为我是从api中提取的。这个类看起来是这样的:
class WeatherReport extends StatelessWidget {
final String _day;
final String _tempMax;
final String _tempMin;
WeatherReport(this._day, this._tempMax, this._tempMin);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Row(
children: <Widget>[
Text(_day, style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
Container(
color: Colors.red,
child: Row(children: <Widget>[
Text(_tempMax + " | ", style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
Opacity(
opacity: 0.5,
child: Text(_tempMin, style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
),
],),
),
],
),
);
}
}
我在主构建文件中调用这个类。在这里,我创建了一个列来容纳上一个类创建的每一行。这个代码看起来像这样:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
WeatherReport(days[0], '${(forecast.days[0].main.tempMax).round()}º', '${(forecast.days[1].main.tempMin).round()}º'),
WeatherReport(days[1], '${(forecast.days[8].main.tempMax).round()}º', '${(forecast.days[9].main.tempMin).round()}º'),
WeatherReport(days[2], '${(forecast.days[16].main.tempMax).round()}º', '${(forecast.days[17].main.tempMin).round()}º'),
WeatherReport(days[3], '${(forecast.days[24].main.tempMax).round()}º', '${(forecast.days[25].main.tempMin).round()}º'),
WeatherReport(days[4], '${(forecast.days[32].main.tempMax).round()}º', '${(forecast.days[33].main.tempMin).round()}º'),
],
),
如有任何帮助,我们将不胜感激。我认为答案很简单,但我想不出解决办法。
您可以用扩展的:包装您的文本小部件
Expanded(
child: Text(
_day,
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
),
这样,文本和温度将尽可能地相互远离。