Flutter 中的可扩展文本小部件 [关闭]

Posted 2023-02-23

【中文标题】Flutter 中的可扩展文本小部件 [关闭]

【英文标题】：Expandable text widget in Flutter [closed]

【发布时间】：2020-10-10 13:36:25

【问题描述】：

在flutter中，我们如何创建一个文本小部件，它只会显示一行文本，但在点击时会展开以显示文本的所有内容？

【参考方案1】：

欢迎来到颤动的世界。

您要查找的小部件是ExpansionTile：

一个简单的代码示例：

ExpansionTile(
  title: Text('My Expansion Tile'),
  children: <Widget>[
    Text('Item 1'), 
    Text('Item 2')],
),

不过，我个人使用Expandable 包，它是类固醇上的扩展图块。 如果提供改进的控制和可定制性。查看他们的文档，其中有一些非常好的示例。

【参考方案2】：

只需使用 Flexible 类尝试您的代码。

您可以找到参考here、here。或者，阅读文档here。

希望它会有所帮助。

【参考方案3】：

如果我理解得很好，您希望最初只显示部分文本，当点击它时会展开或收缩。 试试这个我在下面实现的自定义有状态小部件..希望它有所帮助

 class ExpandableText extends StatefulWidget 
      ExpandableText(this.text = "");
      //text is the total text of our expandable widget
      final String text;
      @override
      _ExpandableTextState createState() => _ExpandableTextState();
    
    
    class _ExpandableTextState extends State<ExpandableText> 
      String textToDisplay;
      @override
      void initState() 
        //if the text has more than a certain number of characters, the text we display will consist of that number of characters;
        //if it's not longer we display all the text
        print(widget.text.length);
     
        //we arbitrarily chose 25 as the length
        textToDisplay =
            widget.text.length > 25 ? widget.text.substring(0,25)+"..." : widget.text;
        super.initState();
      
    
      @override
      Widget build(BuildContext context) 
        return InkWell(
          child: Text(textToDisplay),
          onTap: () 
          
            //if the text is not expanded we show it all
            if (widget.text.length > 25 && textToDisplay.length <= 25) 
              setState(() 
                textToDisplay = widget.text;
              );
             
    //else if the text is already expanded we contract it back
    else if (widget.text.length > 25 && textToDisplay.length > 25) 
              setState(() 
                textToDisplay = widget.text.substring(0,25)+"...";
              );
            
            
          
          ,
        );