flutter - 右侧小部件在 Flutter 中完全可见

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

问题是您的 Text 小部件位于 Column 小部件内，它会根据其子项(在本例中为 Text 小部件)调整大小。因此，overflow: TextOverflow.ellipsis 不会在这里做任何事情，直到您将文本小部件包装在 Column 小部件中。

解决此问题的一种方法是使用 Flexible 包装 Column 小部件小部件和使用 flex随心所欲的属性(property)。

固定代码应该如下所示:

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 {}),
    ],
  )),
]),