Flutter – 连续两个文本,左边一个优雅地溢出

Posted

技术标签:

【中文标题】Flutter – 连续两个文本,左边一个优雅地溢出【英文标题】:Flutter – two text in a row with left one overflowing gracefully 【发布时间】:2018-12-07 19:39:41 【问题描述】:

如何让两个并排的文本小部件只允许最左边的一个优雅地溢出?

一列中的一个文本小部件很容易优雅地溢出。 两个文本小部件连续并排是有问题的。

堆栈溢出需要更多细节,但老实说,我现在可能只是在浪费你更多的时间。

Widget _listItem(String title, String subtitle)
  return Row(
    children: <Widget>[
      _listItemIcon(),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _listItemTitle(title),
            Row(
              children: <Widget>[
                _listItemSubtitle(subtitle), // how do I allow this to overflow gracefully
                _listItemTime("2m") // but stop this from overflowing
              ],
            )
          ],
        ),
      ),
      _listItemFavorite()
    ],
  );


//////////////
Widget _listItemIcon()
  return Icon(Icons.message);


Widget _listItemTitle(String title)
  return Text(
    title,
    softWrap: false,
    overflow: TextOverflow.fade,
    style: TextStyle(
      fontSize:24.0
    ),
  );


Widget _listItemSubtitle(String subtitle)
  return Text(
    "[$subtitle]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );


Widget _listItemTime(String time)
  return Text(
    "[$time]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );


Widget _listItemFavorite()
  return Icon(Icons.favorite);

【问题讨论】:

我不明白您的代码的哪一部分不起作用。哎呀,我什至没有在您的屏幕截图中看到有两个 Text 小部件的行。 @creativecreator 或者可能不是字幕是两个Text 的串联。 \ 为什么结尾需要单独的Text 两种文字样式@creativecreatorormaybenot 【参考方案1】:

您可以使用Flexible 小部件:

Widget _listItemSubtitle(String subtitle) 
  return new Flexible(
    fit: FlexFit.loose,
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );


替代方案:

如果您希望时间小部件始终位于右侧,您可以将字幕文本包裹在 Expanded 小部件中:

Widget _listItemSubtitle(String subtitle)
  return Expanded(
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );

【讨论】:

【参考方案2】:

可以使用ExpandedFlexible 小部件调整小部件的大小以适应一行或一列。要修复前面的示例,即 Text 行对其渲染框来说太宽,请使用 ExpandedFlexible 小部件包装每个 Text。

也许您希望一个小部件占用的空间是其兄弟部件的两倍。为此,请使用Expanded 小部件flex 属性,这是一个确定小部件弹性系数的整数。默认的 flex 因子为 1。以下代码将中间图像的 flex 因子设置为 2:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

【讨论】:

以上是关于Flutter – 连续两个文本,左边一个优雅地溢出的主要内容,如果未能解决你的问题,请参考以下文章

Flutter — 文本为什么可以被编辑?如何自定义编辑的行为?

Flutter — 文本为什么可以被编辑?如何自定义编辑的行为?

Flutter 使用换行对齐两个文本小部件

如何将两个文本集中在Flutter中

文本连续溢出,颤动

是否有一种方法可以将实时记录的音频片段连续发送到Flutter.io中的后端服务器?