Space Flutter 中一行内的两个对象

Question

我知道这里已经发布了类似的问题，但到目前为止我发现的任何问题都没有帮助我解决我的问题。我是 Flutter 的初学者，所以我需要一些帮助。我正在尝试构建一个简单的天气应用程序。我想定位星期几和那一天的 highs/lows ，以便它们尽可能远离并且两个边缘彼此对齐。 Currently, my app looks this (I added the red container to help understand).。星期几和温度互相拥抱，这就是我要解决的问题。

我尝试过使用 mainAxisAlignment.spaceEvenly、spaceBetween 和 spaceAround，但其中 none 根本无法移动文本。我试过使用 Spacer() 但这会使温度消失。

我每天要构建一个单独的 class，因为我要从一个 api 中提取数据。 class 看起来像这样：

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

我在主构建文件中称其为 class。在这里，我创建了一个列来容纳由前一个 class 创建的每一行。该代码如下所示：

    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()}º'),
         ],
       ),

我们将不胜感激任何帮助。我觉得答案很简单，但我想不出解决办法。

Answer 1

您可以使用扩展包装您的文本小部件：

Expanded(
  child: Text(
    _day,
    style: TextStyle(
      color: Colors.white,
      fontSize: 25,
      fontWeight: FontWeight.w300,
    ),
  ),
),

这样文字和温度会尽可能地远离彼此。

Space Flutter 中一行内的两个对象

Space two objects within a row in Flutter

row

spacing

dart

flutter