在 Flutter 中将两个对象隔开一行

Question

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

我尝试过使用 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()}º'),
         ],
       ),

我们将不胜感激任何和所有的帮助。我认为答案很简单，但我无法找到解决方案。

Answer 1

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

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

这样文字和温度会尽可能的相距很远。