ListView Flutter中的文本溢出問題

Question

我有一個帶有浮動按鈕，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（在照片上不可見）之間，一切正常，如果嘗試滾動太多，則反彈在元素內停止。

為了在底部遵循與頂部相同的方式（無溢出），該怎么做？

Answer 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,
              ),
        ),
    ),

靈活的告訴ListView擴展的范圍不要超過屏幕，而ClipRect會注意沒有太多的項目會溢出文本區域。