如何使文本垂直增长和截断?

问题描述 投票:2回答:1

我的代码很简单:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Container(
              height: 60,
              color: Colors.orangeAccent,
              child: Row(
                children: [
                  Expanded(
                    child: 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.',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              )),
        ));
  }
}

它产生以下内容:

enter image description here

我想要实现的是:

enter image description here

我能够通过添加maxLines: 3Text这样做,但显然硬编码maxLines不是一个选项。

我希望Text填充父元素的整个高度,并在需要时用省略号截断。

dart flutter flutter-layout
1个回答
1
投票

那这个呢

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Container(
          height: 60,
          color: Colors.orangeAccent,
          child: Row(
            children: [
              Expanded(
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return 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.',
                      overflow: TextOverflow.ellipsis,
                      maxLines: (constraints.maxHeight / Theme.of(context).textTheme.body1.fontSize).floor() - 1,
                    );
                  },
                ),
              ),
            ],
          )),
    ));
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.