Question

请考虑以下代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new FlatButton(
          child: new Container(
            child: new Center(child: new Text("ABOVE")),
            height: 300.0,
            color: const Color.fromARGB(255, 255, 0, 0),
          ),
        ),
        new Expanded(
            child: new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",)
        ),
        new FlatButton(
          child: new Container(
            child: new Center(child: new Text("BELOW")),
            height: 300.0,
            color: const Color.fromARGB(255, 255, 0, 0),
          ),
        ),
      ],
    );
  }
}

在我的Pixel上，这会产生：

我的期望是文本会一直持续到达底部按钮，然后剪辑。如果我设置overflow: TextOverflow.ellipsis，那么它会在第一行之后截断：

如果我设置maxLines: 3，则会一直持续到第四行：

但是，我找不到一种方法可以继续直到它到达底部按钮。

任何人都可以启发我吗？

Answer 1

没有直接样式选项可以做到这一点，但是你可以通过首先计算可以在运行时占用可用视图的maxLines然后只指定overflow和maxLines属性来实现。

要获得可用的身高，请使用LayoutBuilder提供constrains

lineHeight = fontSize * textScaleFactor * lineHeightScaleFactor
maxlines =（可用高度/线高）

示例：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Column(
        children: <Widget>[
          new FlatButton(
            child: new Container(
              child: new Center(child: new Text("ABOVE")),
              height: 300.0,
              color: const Color.fromARGB(255, 255, 0, 0),
            ),
          ),
          new Expanded(child: new LayoutBuilder(builder: (context, constrains) {

            double lineScaleFactor = 1.1; // this is multiplied with fontsize to get lineHeight
            TextStyle style = new TextStyle(fontSize: 16.0,height: lineScaleFactor);
            double scale = 1.0;
            double lineHeight = style.fontSize*scale*lineScaleFactor;

            return new Container(
              child: new Text(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                overflow: TextOverflow.ellipsis,
                style: style,
                textScaleFactor: scale,
                maxLines: (constrains.maxHeight ~/ lineHeight),
              ),
            );
          })),
          new FlatButton(
            child: new Container(
              child: new Center(child: new Text("BELOW")),
              height: 300.0,
              color: const Color.fromARGB(255, 255, 0, 0),
            ),
          ),
        ],
      ),
    );
  }
}

希望有所帮助！

到达下一个控件时截断文本

1 个答案: