Flutter：阅读更多内容和文本中的主题标签

Question

我想要一个带有“更多...”和主题标签的类似 Instagram 的标题。我使用 readmore package for "more..." and hashtagable 包作为标签。但我想把这两者结合起来。每个包都有一个 Text 属性不接受其他包作为 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();
                                                  },
                                                );
                                              },
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),

但是“more”和“less”总是显示，即使文本只有 1 行

解决方法是什么？

Answer 1

我用 expandable package instead of readmore package . I removed readmore package then I placed hashtagable pacjage in expandable with help of 解决了我的问题

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();
                                                  },
                                                );
                                              },
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),

Answer 2

For But "more" and "less" show always even text is 1 line only

what is the solution ?

你可以用文字的长度来显示more/less，我用了2行150个字符。

Flutter：阅读更多内容和文本中的主题标签

Flutter : read more and hashtags in text

flutter

dart

instagram

hashtag