颤振–连续两个文本,左边一个优美地溢出 [英] Flutter – two text in a row with left one overflowing gracefully
本文介绍了颤振–连续两个文本,左边一个优美地溢出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何获取两个并排的文本小部件,以仅允许最左边的一个小部件正常溢出?
How do I get two side-by-side Text widgets to only allow the left-most one to overflow gracefully?
一列中的一个文本小部件很容易优雅地溢出. 并排放置两个文本小部件是有问题的.
One text widget in a column is easy to overflow gracefully. Two text widgets side-by-side in a row is problematic.
堆栈溢出需要更多详细信息,但老实说,这时我可能只是在浪费更多时间.
Stack overflow wants more details but honestly, I'm probably just wasting more of your time at this point.
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);
}
推荐答案
您可以使用Flexible
小部件:
Widget _listItemSubtitle(String subtitle) {
return new Flexible(
fit: FlexFit.loose,
child: Text(
"[$subtitle]",
softWrap: false,
overflow: TextOverflow.fade,
),
);
}
替代:
如果您希望时间小部件始终位于右侧,则可以将字幕文本包装在Expanded
小部件中:
If you prefer that the time widget is always on the right, you could wrap the subtitle text in an Expanded
widget:
Widget _listItemSubtitle(String subtitle){
return Expanded(
child: Text(
"[$subtitle]",
softWrap: false,
overflow: TextOverflow.fade,
),
);
}
这篇关于颤振–连续两个文本,左边一个优美地溢出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文