ListView Flutter 中的文本溢出问题答案

【问题标题】：Text overflow issue in ListView FlutterListView Flutter 中的文本溢出问题
【发布时间】：2019-01-04 12:09:47
【问题描述】：

我有一个带有浮动按钮、文本字段和消息列表 (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 之间（在照片上不可见），一切正常，如果您尝试滚动太多，反弹会在元素内停止。

在底部怎么做，让它像在顶部一样遵守边界（不溢出）？

【问题讨论】：

标签： android listview user-interface overflow flutter

【解决方案1】：

我找到了解决方案。您必须将 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 会注意没有太多的项目会溢出文本区域。

【讨论】：