Flutter代码中的文本溢出不起作用

xwbd5t1u  于 2022-12-27  发布在  Flutter
关注(0)|答案(3)|浏览(138)

我尝试省略Flutter应用程序中的文本,但无法设置。
我设计的视图如下

Positioned(
            bottom: 20,
            left: 10,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  snapshot.data.results[index].title,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                Text(
                  snapshot.data.results[index].release_date,
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w400,
                      color: Colors.white,
                      letterSpacing: 1.2),
                ),
              ],
            ))

kr98yfug

kr98yfug1#

您应该使用FlexibleExpanded小部件将文本换行,如下所示:

Flexible(child:Text("Text goes here"),

要了解更多信息,请尝试this链接

wqlqzqxt

wqlqzqxt2#

我最近遇到了类似的情况。如果你使用DartDevTools检查Text小部件的renderObject上的约束,你很可能会发现maxWidth约束是无穷大。因此Text小部件并不知道它应该 Package (默认行为)或应用省略号(在你的情况下)到你提供的文本。
在我的例子中,解决方案是将Text Widget Package 在Expanded中。

zdwk9cvp

zdwk9cvp3#

你应该用Expanded Package 你的小部件

Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      ("Mortal Kombat"),
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      ("12/10/2022"),
                      style:
                          TextStyle(color: Colors.black.withOpacity(0.4)),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    const Text(
                      ("Express yourself with a custom text design created just fo`r you by a professional designer. Need ideas? We’ve collected some amazing examples of text images from our global community of designers. Get inspired and start planning the perfect text design today."),
                      // style: TextStyle(overflow: TextOverflow.ellipsis),

                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],

相关问题