Flutter- TextField 的扩展面板

Question

flutter 中的扩展面板很棒。他们需要声明 header 和 body 以及 isExpanded 属性才能构建扩展面板。像这样：

return new ExpansionPanel(
  headerBuilder: (BuildContext context, bool isExpanded){
                   return Text('header');},  
  isExpanded: false,
  body: new Text(body[enter image description here][1]),
);

我想构建一个可扩展的文本字段。我可以用扩展面板包裹文本字段，并将 TextField 指定为 Body。但是在header和body之间有一个大白space。另外，我只想展开 body 并完全删除 header，这样我就可以看到 body 的第一行文本而不展开，而 [=22] 的其余部分=] 在我展开扩展面板时打开。有谁知道这方面的任何解决方法？或者我可以使用的任何不同的小部件或 material 组件。

这是现在的截图，看到 header 和 body 之间有很多间距。

如果您对这个问题感兴趣，请点赞，以得出更好的答案。 Flutter 有很多未来，我们需要一个更强大的堆栈溢出社区。

Answer 1

我不确定 ExpansionPanel 是否是您想要的。

如果我没理解错的话，你想要一个有两个状态的 Text。在第一种状态下 Text 只有一行，在第二种状态下 Text 可以显示所有行。当用户点击此小部件时，它会从一种状态切换到另一种状态。

我为此创建了一个简单的小部件：

class ExpandableText extends StatefulWidget {
  const ExpandableText(
    this.data, {
    Key key,
  }) : super(key: key);

  /// The text to display.
  ///
  /// This will be null if a [textSpan] is provided instead.
  final String data;

  @override
  _ExpandableTextState createState() => new _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleOnTap,
      child: new Text(
        widget.data,
        maxLines: _isExpanded ? null : 1,
      ),
    );
  }

  void _handleOnTap() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }
}

这里没有动画所以比较生硬。请随意自定义上述小部件以满足您的需求。

Flutter- TextField 的扩展面板

Flutter- Expansion Panel for TextField

dart

dart-pub

material-ui

flutter

flutter-layout