代码之家  ›  专栏  ›  技术社区  ›  mico Matt

ListView flutter中的文本溢出问题

  •  0
  • mico Matt  · 技术社区  · 7 年前

    我有一个带有浮动按钮、文本字段和消息列表(ListView)的代码。

    当用户将文本写入textfield并按下按钮时,文本将附加到listview。

    生成textfield和listview的代码如下:

    body:new column(children:
    小部件& GT;
    新文本(新文本)
    '您已多次按下按钮:',
    )
    新文本(新文本)
    “美元计数器”
    style:theme.of(context).textTheme.display1,
    )
    新型柔性
    贴合度:flexfit.tight,
    子级:新建ListView.Builder(
    填充:新边集。全部(8.0)
    项目范围:20.0,
    项生成器:(BuildContext上下文,int索引){
    返回新文本(_GetnthValue(index),溢出:textOverflow.clip,);
    }
    项计数:_listTexts.length,
    )
    )
    新分隔器(高度:2.0,),
    新文本域(新文本域)
    控制器:
    更改后:_AppendText,
    )
    ,
    )
    < /代码> 
    
    

    问题出在这两个方面:textfield和listview。当项目数超过分隔符前的空间限制时,ListView将继续在其顶部和文本字段呈现数据:请参见下面的照片。

    如您所见,底部最后三(3)个Ok正在重叠其限制。在Web世界中,您可以绘制textfield的背景,这样溢出就不可见了,但我不能这样做,也没有任何其他的技巧来解决这个问题。

    在页面顶部的文本字段之间(在照片上不可见),一切正常,如果您试图滚动太多,元素内部的弹跳停止。

    在底部做什么,让它遵守边界,就像在顶部一样(没有溢出)?

    生成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将继续呈现其顶部的数据和文本字段:请参见下面的照片。

    enter image description here

    如您所见,底部最后三(3)个Ok正在重叠其限制。在Web世界中,您可以绘制textfield的背景,这样溢出就不可见了,但我不能这样做,也没有任何其他的技巧来解决这个问题。

    在页面顶部的文本字段之间(在照片上不可见),一切正常,如果您试图滚动太多,元素内部的反弹将停止。

    在底部做什么,让它遵守边界,就像在顶部一样(没有溢出)?

    1 回复  |  直到 7 年前
        1
  •  0
  •   mico Matt    7 年前

    我找到了解决办法。您必须将cliplect连接到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不要扩展到超过screen的范围,cliplect会注意到不会有太多的项目溢出文本区域。