如何在不改变所有内容的情况下连续格式化文本答案

【问题标题】：How to format text in a row without shifting everything如何在不改变所有内容的情况下连续格式化文本
【发布时间】：2021-03-17 16:25:10
【问题描述】：

我的 Flutter 应用中有一个列表视图，其中填充了卡片。

每张卡片都会有一个圆形头像，显示警报发生日期的用户名，然后一直向右移动将是一个图标和警报标题。

为了更好地了解我在说什么，我已经provided a picture here.

所以现在我只有右侧的图标和标题以及左侧的用户名。唯一取决于警报标题的大小，它会改变用户名的位置。

我觉得这很容易解决，但我不知道。

代码如下：

Card(
 child: SizedBox(
          height: MediaQuery.of(context).size.height * .08,
          child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                      SizedBox(width: 10.0),
                      SizedBox(
                          width: MediaQuery.of(context).size.width * .08),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
                        ],
                      ),
                      SizedBox(
                          width: MediaQuery.of(context).size.width * .1),
                      AutoSizeText(curAlert.title),
                      Icon(
                        Icons.warning_amber_outlined,
                        color: Colors.red[900],
                        size: MediaQuery.of(context).size.width * .1,
                      ),
                    ],
                  ),
                ),
              );

【问题讨论】：

所以你希望标题在最左边
是也不是，老实说，现在我只想知道如何排列所有名称，而不管标题的大小。您可以在链接的图片中看到，如果右侧的标题是较长的字符串，则左侧的名称具有不同的位置。现在将名称设置为最左侧可能会在我以后添加其他信息时出现问题。
在名称和标题之间放置Spacer() 小部件

标签： flutter dart flutter-layout

【解决方案1】：

添加一个 Spacer() 或将最右边的部分包装在一个容器和一行中会产生相同的结果。

添加 Container 和 Row 使代码如下所示：

Card(
  child: SizedBox(
      height: MediaQuery.of(context).size.height * .08,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
           SizedBox(width: 10.0),
           SizedBox(
              width: MediaQuery.of(context).size.width * .08),
           Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
             ],
           ),
           Container(
             width: MediaQuery.of(context).size.width * .7,
             child: Row(
                 mainAxisAlignment: MainAxisAlignment.end,
                 children: [
                     SizedBox(
                        width: MediaQuery.of(context).size.width * .1),
                        AutoSizeText(curAlert.title),
                        Icon(
                          Icons.warning_amber_outlined,
                          color: Colors.red[900],
                          size: MediaQuery.of(context).size.width * .1,
                        ),
                     ]),
                   ),
                 ],
               ),
             ),
           );

添加 Spacer 使代码如下所示：

    Card(
  child: SizedBox(
      height: MediaQuery.of(context).size.height * .08,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
           SizedBox(width: 10.0),
           SizedBox(
              width: MediaQuery.of(context).size.width * .08),
           Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
             ],
           ),
           Spacer(),
           SizedBox(
             width: MediaQuery.of(context).size.width * .1),
           AutoSizeText(curAlert.title),
           Icon(
             Icons.warning_amber_outlined,
             color: Colors.red[900],
             size: MediaQuery.of(context).size.width * .1,
           ),
          ],
         ),
        ),
       );

从功能上讲，两者最终都得到了我正在寻找的相同结果。

【讨论】：