flutter - 如何使文本窗口小部件的大小随内容变化而变化？

Question

我想设计一个包含两个Text小部件的组合Text小部件。

第一个“文本”窗口小部件的大小随内容的变化而变化，当达到最大长度时，将显示省略号。如下所示，红线部分是固定的。





这是我的代码:

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

当长度最大时，显示正常。但是，当长度非常小时，中间会出现空白。



那么，我该如何改进我的代码？

Answer 1

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

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

使用 Flexible 小部件可以使Row，Column或Flex的子级灵活地扩展以填充主轴上的可用空间。

当 Expanded 时，强制子项扩展以填充可用空间。

您还可以将fit: FlexFit.tight [ child 被迫填充可用空间]或fit: FlexFit.loose [ child 最多可以与可用空间一样大(但允许更小)。]传递给Flexible小部件。

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