android - ListView Flutter 中的文本溢出问题
问题描述
我有一个带有浮动按钮、文本字段和消息列表(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。当项目数超过 Divider 之前的空间限制时,ListView 会继续在其顶部和 textField 上呈现数据:见下图。
如您所见,底部最后的三 (3) 个 OK 与它们的限制重叠。在网络世界中,您可以绘制 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,
),
),
),
Flexible 告诉 ListView 不要扩展超过屏幕,并且 ClipRect 会注意没有太多的项目会溢出文本区域。
推荐阅读
- p2p - Kademlia 密钥用于识别节点和数据是什么意思?
- javascript - onChange 在反应中没有触发 NumericInput
- python - Pandas - 将一列中的整数映射到新列中的字符串
- javascript - 使用 node.js 创建文件夹,文件
- python - 如何避免 Python I/O 操作对 YAML 文件中的信息进行自动排序?
- c# - 如何在实体框架中为 DatabaseGeneratedOption Identity 生成顺序增量 id
- java - 服务在 Grails 3.3.0 中的线程中运行
- javascript - 优化 Google Apps 脚本中的 for-loop 函数(可能是数组)?
- angular - Google 折线图“dragToZoom”属性在版本 45 上不起作用
- c# - 在 .dll 中发送配置