Flutter Markdown“显示更多”按钮

Posted 2023-02-23

【中文标题】Flutter Markdown“显示更多”按钮

【英文标题】：Flutter Markdown "Show more" button

【发布时间】：2020-11-11 03:15:51

【问题描述】：

我在 LimitedBox 中使用来自 flutter_markdown 的 MarkdownBody。当按下“显示更多”按钮时，maxHeight 设置为 double.infinity 并显示全文：

                                             LimitedBox(
                                                maxHeight:
                                                    showMoreCommentsIds
                                                            .contains(
                                                                commentId)
                                                        ? double.infinity
                                                        : 100,
                                                child: Wrap(
                                                  direction:
                                                      Axis.horizontal,
                                                  children: <Widget>[
                                                    MarkdownBody(
                                                      data: showList[index]
                                                          .comment
                                                          .comment,
                                                    )
                                                  ],
                                                ),
                                              ),

但是如果有必要，我怎样才能找出文本的高度并只显示“显示更多”按钮？

【参考方案1】：

您可以使用 text.length 查找文本的长度，并根据该信息确定是否需要“显示更多”按钮。例如：

if(text.length > 60) 
_showButton();

您可能需要对文本的长度进行一些测试，以找出您想要作为阈值的长度。我只是选择了 60 作为任意数字。

【讨论】：

感谢您的回答。问题是文本是降价格式的，所以它可以有不同的字体大小或包含图像。这就是为什么我使用文本小部件的最大高度而不是最大行数的原因。我正在寻找一种方法来获取 MarkdownBody 的高度，所以如果它高于 100，我只能显示按钮。

这有帮助吗？ ***.com/questions/49307677/…

是的，这个问题的第二个答案对我有用 (***.com/a/60868972/7061265)。谢谢。

可以分享一下sn-p的代码吗？我无法正确显示有限的文本格式。

我不确定您所说的“我无法正确显示有限的文本格式”是什么意思。你能详细说明一下吗？格式不正确是什么意思？

【参考方案2】：

我遇到了类似的问题，因为我必须知道小部件的大小才能应用一些逻辑。

我了解到您可以在 Offstage 小部件中预渲染小部件，在安装后使用小部件键确定它的大小。 你应该等待重建，所以你可以强制它，然后你用这样的函数获得大小：

Future.delayed(Duration(milliseconds:100)).then(
    final widgetSize = getWidgetSize(widgetKey);

    // You can make logic here to remove the Offstage, variables, and free its space.

    // Todo: apply the size in your code after this
)

...

Size getWidgetSize(GlobalKey key) 
  final RenderBox renderBox = key.currentContext.findRenderObject();
  return renderBox.size;

在我的例子中，我在点击某个地方后需要它，所以我在一个函数中使用它，但也许你会直接在 initState() 上应用它，在后帧回调中。

initState()
     super.initState();
     ServicesBinding.instance.addPostFrameCallback((_) async 
        // here
     );