[英]Text overflow issue in ListView Flutter
我有一个带有浮动按钮,textField和消息列表(ListView)的代码。
当用户将文本写入textField并按下按钮时,文本将附加到ListView。
生成textField和ListView的代码如下:
body: new Column(children:
<Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new Flexible(
fit: FlexFit.tight,
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return new Text(_getNthValue(index), overflow: TextOverflow.clip,);
},
itemCount: _listTexts.length,
),
),
new Divider(height: 2.0,),
new TextField(
controller: _controller,
onChanged: _appendText,
)
],
),
问题在这两个之间:textField和ListView。 当项目数超出分隔线之前的空间限制时,ListView继续在其上方和textField上呈现数据:请参见下图。
如您所见,底部的最后三个OK中的三(3)个重叠了它们的限制。 在网络世界中,您可以绘制textField的背景,以使溢出不可见,但我无法做到这一点,也没有任何其他技巧可以解决问题。
在页面顶部的textField(在照片上不可见)之间,一切正常,如果尝试滚动太多,则反弹在元素内停止。
为了在底部遵循与顶部相同的方式(无溢出),该怎么做?
我找到了解决方案。 您必须将ClipRect附加到Flexible,如下所示:
new Flexible(
child:
new ClipRect(
child:
new ListView.builder(
padding: new EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return new Text(_getNthValue(index));
},
itemCount: _listTexts.length,
),
),
),
灵活的告诉ListView扩展的范围不要超过屏幕,而ClipRect会注意没有太多的项目会溢出文本区域。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.