时间戳

首页 > 解决方案 > 如何使 Text Widget 的大小随 Flutter 中的内容而变化？

flutter - 如何使 Text Widget 的大小随 Flutter 中的内容而变化？

问题描述

我想设计一个由两个 Text 小部件组成的组合 Text 小部件。

第一个 Text 小部件的大小随着内容的变化而变化，当它达到最大长度时，会显示一个省略号。如下图，红线部分是固定的。

然后这是我的代码：

Row(
  children: <Widget>[
    Expanded(
      child: Text(
        'W',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
);

长度最大时，显示正常。但是当长度很小的时候，中间会有一个空白。

那么，我需要如何改进我的代码呢？

标签： flutterdartflutter-layout

解决方案

您需要使用Flexible小部件而不是Expanded.

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        'Was',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
),

使用Flexible小部件可以为 a 、 或 的子级提供Row扩展Column的Flex灵活性以填充主轴上的可用空间。

而Expanded，则强制孩子展开以填充可用空间。

您也可以将fit: FlexFit.tight[孩子被强制填充可用空间]或fit: FlexFit.loose[孩子最多可以与可用空间一样大（但允许更小）。]传递给Flexible小部件。

默认情况下，它设置为FlexFit.loose。

推荐阅读