Flutter-TextField 的扩展面板
Posted
技术标签:
【中文标题】Flutter-TextField 的扩展面板【英文标题】:Flutter- Expansion Panel for TextField 【发布时间】:2018-12-30 12:07:13 【问题描述】: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 指定为正文。但是标题和正文之间有一个很大的空白。另外,我想只是扩展正文并完全删除标题,这样我就可以看到正文的第一行而不展开,当我展开扩展面板时,正文的其余部分会打开。有谁知道这方面的任何解决方法?或者我可以使用的任何不同的小部件或材料组件。
这里是它现在的样子的屏幕截图,看到标题和正文之间有很多间距。
如果您对这个问题感兴趣,请点赞,以得出更好的答案。 Flutter 有很多未来,我们需要一个更强大的堆栈溢出社区。
【问题讨论】:
您是否尝试过设置debugPaintSizeEnabled=true
就像flutter.io/debugging/#visual-debugging 中解释的那样来追踪它的来源?
【参考方案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;
);
这里没有动画,所以很突然。随意自定义上述小部件以满足您的需求。
【讨论】:
感谢您的解决方案。我最终想通了。我正在使用 ExpansionTile 代替扩展面板来消除标题和正文之间的间距。我使用 bloc 模式和无状态小部件来设置 maxLines 计数,因此我在不使用 Stateful 小部件的情况下实现了结果,但采用了类似的方法。我有你提到的那个动画问题。你知道任何相同的资源。再次感谢您抽出宝贵时间回答问题。以上是关于Flutter-TextField 的扩展面板的主要内容,如果未能解决你的问题,请参考以下文章