如何显示适合屏幕的 Row() 儿童尺寸？答案

【问题标题】：How to show Row() children size fitted to screen?如何显示适合屏幕的 Row() 儿童尺寸？
【发布时间】：2020-10-27 09:25:27
【问题描述】：

如何修复不同屏幕尺寸的错误如果屏幕有空间，我希望应该安装中间文本如果屏幕没有空间，它应该 TextOverflow.ellipsis

这是我的代码

      Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: 10),
              child: Icon(
                MdiIcons.alertCircle,
                color: Colors.white,
                size: 16,
              ),
            ),
            Container(
              child: Text(
                "Your Service Request Has Been Approved",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    fontSize: 13,
                    color: Colors.white,
                    fontWeight: FontWeight.w300),
              ),
            ),
            Spacer(),
            Container(
              margin: EdgeInsets.only(right: 10),
              child: Icon(
                MdiIcons.close,
                color: Colors.white,
                size: 16,
              ),
            ),
          ],
        ),

【问题讨论】：

用 Expanded 包裹内部容器并移除您给定的高度。展开的小部件将使容器占据可用的全部空间。

标签： android ios flutter flutter-layout

【解决方案1】：

您可以使用Expanded 小部件

Expanded(
 child: Text(
            "Your Service Request Has Been Approved",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
                fontSize: 13,
                color: Colors.white,
                fontWeight: FontWeight.w300),
          ),
        )
)

【讨论】：

您可以将容器小部件包裹在展开后的文本小部件中并移除。

【解决方案2】：

您可以删除Spacer 小部件并使用Expanded 小部件包装Container，如下代码：

Expanded(
            child: Container(
              child: Text(
                "Your Service Request Has Been Approved",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    fontSize: 13,
                    color: Colors.white,
                    fontWeight: FontWeight.w300),
              ),
            ),
          ),

【讨论】：

【解决方案3】：

正如您在其中一个答案的评论中所问的那样，要在用Expanded 包裹时显示全文，您所要做的就是用FittedBox 包裹它。这将允许根据可用宽度调整字体大小。

 Expanded(
             child: FittedBox(
              child: Text(
                "Your Service Request Has Been Approved",
                maxLines: 1,
                style: TextStyle(
                    fontSize: 13,
                    color: Colors.white,
                    fontWeight: FontWeight.w300),
              ),),
            ),

【讨论】：