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】:可以使用Expanded
或Flexible
小部件调整小部件的大小以适应一行或一列。要修复前面的示例,即 Text 行对其渲染框来说太宽,请使用 Expanded
或 Flexible
小部件包装每个 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 — 文本为什么可以被编辑?如何自定义编辑的行为?