右侧小部件在颤动中完全可见
右侧小部件在颤动中完全可见
提问于 2018-07-02 04:23:30
我想让两个小部件相邻，而右边的小部件总是完全可见的。在这种情况下，这两个图标并不完全可见。
这是我的源代码方法，但它不适用于overflow: TextOverflow.ellipsis。我使用这些小部件的目的是让左侧的文本以
...
如果他们太长的话。如何才能使小工具2始终完全可见？
new Row(children: <Widget>[
// ### Widget 1 ###
new Column(children: <Widget>[
new Text("A very long strings sassaasasasasasasssss", overflow: TextOverflow.ellipsis),
new Text("Another very long string skaskajsakaskjsa", overflow: TextOverflow.ellipsis),
]),
// ### Widget 2 ###
/* should be visible in full size on the right in every situation */
new Expanded(child:
new Row(
children: <Widget>[
new Container(
child: new IconButton(icon: new Icon(Icons.check, color: Colors.green, size: 35.0), onPressed: () async {
}),
margin: new EdgeInsets.only(right: 10.0),
),
new IconButton(icon: new Icon(Icons.remove, color: Colors.red, size: 35.0), onPressed: () async {
}),
],
mainAxisSize: MainAxisSize.min
)
),
]
),回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-02 13:50:55
问题是您的Text小部件位于Column小部件中，该小部件的大小会根据它的childs(在本例中是Text小部件)进行调整。因此，在您将文本小部件包装在Column小部件中之前，overflow: TextOverflow.ellipsis在这里不会做任何事情。
解决此问题的一种方法是使用Flexible小部件包装Column小部件，并根据需要使用flex属性。
修复代码应如下所示：
new Row(children: <Widget>[
// ### Widget 1 ###
new Flexible( // newly added
flex: 2, // newly added
child: new Column(
mainAxisSize: MainAxisSize.min, // newly added
crossAxisAlignment: CrossAxisAlignment.start, // newly added
children: <Widget>[
new Text("A very long strings sassaasasasasasasssss",
overflow: TextOverflow.ellipsis),
new Text("Another very long string skaskajsakaskjsa",
overflow: TextOverflow.ellipsis),
],
),
),
// ### Widget 2 ###
/* should be visible in full size on the right in every situation */
new Expanded(
child: new Row(
//mainAxisSize: MainAxisSize.min, // coomented because will not do anything here
children: <Widget>[
new Container(
child: new IconButton(
icon: new Icon(Icons.check,
color: Colors.green, size: 35.0),
onPressed: () async {}),
margin: new EdgeInsets.only(right: 10.0),
),
new IconButton(
icon: new Icon(Icons.remove, color: Colors.red, size: 35.0),
onPressed: () async {}),
],
)),
]),Stack Overflow用户
发布于 2018-07-02 04:30:40
您可以使用具有其实现的trailing的ListTile，它只需在行尾添加一个小部件：
ListTile(
title: Widget1,
trailing: new Row(
children: <Widget> [
IconButton,
IconButton
]
),
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51126753
复制相关文章
相似问题