Flutter：阅读更多内容和文本中的标签答案

【问题标题】：Flutter : read more and hashtags in textFlutter：阅读更多内容和文本中的标签
【发布时间】：2022-01-17 13:13:49
【问题描述】：

我想要一个类似 Instagram 的标题，带有“更多..”和主题标签。我将readmore 包用于“更多...”，将hashtagable 包用于主题标签。但我想将这两者结合起来。每个包都有一个不接受其他包作为文本的 Text 属性。是否有任何解决方案或软件包可以将主题标签和“更多...”放在一个文本中？

我可以用可扩展包而不是像这样的 readmore 包来解决这个问题

ExpandableNotifier(
                                    child: Column(
                                      children: [
                                        Expandable(
                                          collapsed: HashTagText(
                                            text: postCaption,
                                            decoratedStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.blue),
                                            basicStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            onTap: (text) {
                                              print(text);
                                            },
                                            softWrap: true,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                          expanded: HashTagText(
                                            text: postCaption,
                                            decoratedStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontFamily: 'IranSans',
                                                fontWeight: FontWeight.bold,
                                                color: Colors.blue),
                                            basicStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            onTap: (text) {
                                              print(text);
                                            },
                                            softWrap: true,
                                          ),
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: <Widget>[
                                            Builder(
                                              builder: (context) {
                                                var controller =
                                                    ExpandableController.of(
                                                        context,
                                                        required: true)!;
                                                return TextButton(
                                                  child: Text(
                                                    controller.expanded
                                                        ? "less..."
                                                        : "more...",
                                                    style: Theme.of(context)
                                                        .textTheme
                                                        .button!
                                                        .copyWith(
                                                            color: Colors
                                                                .deepPurple),
                                                  ),
                                                  onPressed: () {
                                                    controller.toggle();
                                                  },
                                                );
                                              },
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),

但“更多”和“更少”总是显示即使文本只有 1 行

解决办法是什么？

【问题讨论】：

如果没有看到您的代码或尝试将这两者结合起来，很难帮助您。您应该提供更多信息。
您找到解决方案了吗？ @mm sh
@KishanSomaiya 是的。看下面

标签： flutter dart instagram hashtag

【解决方案1】：

我用 expandable 包而不是 readmore 包解决了我的问题。我删除了 readmore 包，然后我在 this article 这样的帮助下将 hashtagable pacjage 放入可扩展中

ExpandableNotifier(
                                    child: Column(
                                      children: [
                                        Expandable(
                                          collapsed: HashTagText(
                                            text: postCaption,
                                            decoratedStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.blue),
                                            basicStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            onTap: (text) {
                                              print(text);
                                            },
                                            softWrap: true,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                          expanded: HashTagText(
                                            text: postCaption,
                                            decoratedStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontFamily: 'IranSans',
                                                fontWeight: FontWeight.bold,
                                                color: Colors.blue),
                                            basicStyle: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            onTap: (text) {
                                              print(text);
                                            },
                                            softWrap: true,
                                          ),
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: <Widget>[
                                            Builder(
                                              builder: (context) {
                                                var controller =
                                                    ExpandableController.of(
                                                        context,
                                                        required: true)!;
                                                return TextButton(
                                                  child: Text(
                                                    controller.expanded
                                                        ? "less..."
                                                        : "more...",
                                                    style: Theme.of(context)
                                                        .textTheme
                                                        .button!
                                                        .copyWith(
                                                            color: Colors
                                                                .deepPurple),
                                                  ),
                                                  onPressed: () {
                                                    controller.toggle();
                                                  },
                                                );
                                              },
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),

【讨论】：

【解决方案2】：

但“更多”和“更少”总是显示即使文本只有 1 行

解决办法是什么？

您可以使用文本的长度来显示更多/更少，我使用了 150 个字符 2 行。

【讨论】：