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

【问题标题】：Expandable text widget in Flutter [closed]Flutter 中的可扩展文本小部件 [关闭]
【发布时间】：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)+"...";
              });
            }
            
          
          },
        );
      }
    }

【讨论】：