Flutter- TextField扩展面板

时间:2018-07-23 05:23:30

标签: dart flutter material-ui dart-pub flutter-layout

颤振的扩展面板很棒。它们要求标头和正文以及isExpanded属性被声明为能够构造Expansion面板。像这样:

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

我想构建一个Expandable TextField。我可以使用“扩展”面板包装文本字段,然后将TextField指定为Body。但是标题和正文之间有很大的空白。另外,我只想扩展主体并完全删除标题,这样我就可以看到主体的第一行文本而不进行扩展,而当我扩展“扩展”面板时,主体的其余部分将打开。有人知道为此有任何解决方法吗?或我可以使用的任何其他小部件或材料组件。

这是当前外观的屏幕截图,看到标题和正文之间有很大的间距。

enter image description here

如果您对此问题感兴趣,请投票赞成,以得出更好的答案。 Flutter即将到来,我们需要一个更强大的堆栈溢出社区。

1 个答案:

答案 0 :(得分:2)

我不确定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;
    });
  }
}

这里没有动画,所以非常突然。可以随意自定义上述窗口小部件以满足您的需求。