dart 我有很长的文字，我想显示为溢出文本将显示为在sliverlist中的文本小部件中的doted

pwuypxnk 于 2023-05-11 发布在其他

关注(0)|答案(5)|浏览(137)

我面临着这个问题：

但我想要这样的文字

我正在开发一个Flutter应用程序，我试图在SliverList小部件中显示一个长文本。我想将溢出的文本显示为点，以便用户知道还有更多的文本要阅读。我已经尝试使用设置了maxLines和overflow属性的Text小部件，但它似乎在SliverList中不起作用。文本仍然显示，没有任何截断或点。谁能帮我弄清楚如何在Flutter的SliverList小部件中将溢出文本显示为点？

SliverList(
                  delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                      return Container(
                        padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            CircleAvatar(
                              backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"),
                              radius: screenWidth*0.08,
                            ),
                            SizedBox(width: screenWidth*0.05,),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "Adam John",
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18.0,
                                  ),
                                ),
                                SizedBox(height: 5.0),
                                Container(
                                  padding: const EdgeInsets.all(1),
                                  child: Text(
                                    "hello! my name is adam john and i'm your new tariner",
                                    maxLines: 1,
                                    overflow: TextOverflow.fade,
                                    style: TextStyle(
                                      color: AppColors().darKShadowColor,
                                      fontSize: 16.0,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Text(
                          "10:30pm",
                              style: TextStyle(
                                color:  AppColors().darKShadowColor,
                                fontSize: 16.0,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                    childCount: 3,
                  ),
                ),

dart

来源：https://stackoverflow.com/questions/76217412/i-have-long-text-i-want-to-show-as-overflow-text-will-be-shown-as-doted-in-text

5条答案

按热度按时间

pcrecxhr1#

您的文本位于行内，因此它具有无限宽度。
将Text Package 在Expanded中，并将溢出设置为：

overflow: TextOverflow.ellipsis,

赞(0）回复(0）举报 2023-05-11

vcudknz32#

我正在尝试解决您的问题：

SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"),
                  radius: screenWidth*0.08,
                ),
                SizedBox(width: screenWidth*0.05,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Adam John",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                      SizedBox(height: 5.0),
                      Container(
                        padding: const EdgeInsets.all(1),
                        child: Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis, // set overflow to ellipsis
                          style: TextStyle(
                            color: AppColors().darKShadowColor,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Text(
                  "10:30pm",
                  style: TextStyle(
                    color:  AppColors().darKShadowColor,
                    fontSize: 16.0,
                  ),
                ),
              ],
            ),
          );
        },
        childCount: 3,
      ),
    ),

赞(0）回复(0）举报 2023-05-11

pw136qt23#

像这样更新代码

Container(
                        width: 200,//you need to set width to work overflow 
                        padding: const EdgeInsets.all(1),
                        child: const Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                        )),

赞(0）回复(0）举报 2023-05-11

yrwegjxp4#

只需将文本小部件中的overflow属性设置为

overflow: TextOverflow.ellipsis,

这应该做的工作，所以这是如何您的容器将看起来像

Container(
                        width: 200,//you need to set width to work overflow 
                        padding: const EdgeInsets.all(1),
                        child: const Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                        )),

赞(0）回复(0）举报 2023-05-11

thtygnil5#

Row(
      children: [
        Expanded(
          child: Text(
            "Your Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    )

赞(0）回复(0）举报 2023-05-11

我来回答

dart 我有很长的文字，我想显示为溢出文本将显示为在sliverlist中的文本小部件中的doted

5条答案

相关问题

热门标签

最新问答