Flutter - 隐藏从具有动态高度的容器溢出的文本

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

所以我有一个容器,其高度取决于设备的屏幕尺寸。我在那个容器里有一些文本。我希望容器能够包含所有可以包含的文本,但隐藏开始溢出的文本。像下面这样:

但我真的无法弄清楚这一点。我确实有一个代码,但在我当前的代码中,我需要指定最大行数才能隐藏其余的溢出。但由于容器高度是动态的,我不知道 maxLines 在那里会是什么。那么有什么办法可以达到这个目的吗?

当前代码
Container(
                                  height: MediaQuery.of(context).size.height * .3,
                                  color: Colors.red,
                                  child: Text(
                                    'Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit.',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 12,
                                      letterSpacing: .5,
                                      height: 1.3,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    maxLines: 4,
                                  ),
                                ),
flutter layout
1个回答
0
投票

当您提前知道文本最大行数时,TextOverflow.ellipsis 很有用;在您的情况下,如果您希望文本适应容器大小,则不应使用 TextOverflow.ellipsis 或 maxLines,它会适应容器并隐藏溢出的文本。

Container(
 height: MediaQuery.of(context).size.height * .3,
 color: Colors.red,
 child: Text(
     'Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit.',
     style: TextStyle(
         color: Colors.white,
         fontSize: 12,
         letterSpacing: .5,
         height: 1.3,
     ),
  ),
)
© www.soinside.com 2019 - 2024. All rights reserved.