Question

我想要两个彼此相邻的小部件，而正确的小部件始终是完全可见的。在这种情况下，这两个图标不完全可见。

这是我的源代码方法，但不适用于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
            )
          ),
        ]
      ),

Answer 1

您可以将ListTile与已实现的ListTile( title: Widget1, trailing: new Row( children: <Widget> [ IconButton, IconButton ] ), )一起使用，该代码只需在行的末尾添加一个小部件：

{{1}}

Answer 2

问题是您的Text小部件位于Column小部件内，该小部件会根据其子级（在本示例中为Text小部件）进行调整大小。因此，overflow: TextOverflow.ellipsis在这里不会做任何事情，除非您将文本小部件包装在Column小部件中。

解决此问题的一种方法是使用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 {}),
    ],
  )),
]),

正确的小部件在Flutter中完全可见

2 个答案: