我有以下Widget树结构:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(Text("Very very long text title", overflow: TextOverflow.ellipsis)),
getMenuAnchor(),
],
)),
IconButton(icon: 'share_icon.png')
],
);
但是,如果我们从横向模式切换到纵向模式,我希望标题换行并以省略号结尾,这样
share_icon
、menu_anchor
和 text
可以适合单行而不溢出。
小部件树应该是什么,以便所有元素都可以连续显示而不抑制共享和菜单图标?
删除包装文本和菜单锚点的未使用容器:
Row(
children: [
Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
getMenuAnchor(),
IconButton(icon: 'share_icon.png')
],
),
或者如果你确实需要容器,那么也尝试用Flexible 包裹它:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
getMenuAnchor(),
],
)),
),
IconButton(icon: 'share_icon.png')
],
),
试试这个:
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(Text("Very very long text title",
overflow: TextOverflow.ellipsis)),
getMenuAnchor(),
],
)),
IconButton(icon: 'share_icon.png')
],
),
);