【问题标题】:Flutter rendering listView is overflowingFlutter 渲染 listView 溢出
【发布时间】:2019-01-29 22:29:14
【问题描述】:

我有一个用于呈现一系列消息的聊天应用程序的代码。问题是页面显示正常,但是在尝试发送消息时出现渲染溢出。就像我的输入一直在上升,而不是在我显示的键盘上设置自己。

这是我渲染页面的代码

 return Scaffold(
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Flexible(
        child: ListView.builder(
          itemBuilder: (_, index) => _messages[index],
          itemCount: _messages.length,
          //El reverse hace que vaya de abajo hacia arriba
          reverse: true,
          padding: EdgeInsets.all(6.0),
        ),
      ),
      Divider(
        height: 1.0,
      ),
      Container(
        child: _buildComposer(),
        decoration: BoxDecoration(color: Theme.of(context).cardColor),
      )
    ],
  ),
);

这里我有我认为错误所在的输入代码

 Widget _buildComposer() {
return IconTheme(
  data: IconThemeData(color: Theme.of(context).accentColor),
  child: Container(
    margin: const EdgeInsets.symmetric(horizontal: 9.0),
    child: Row(
     // mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          child: TextField(
            controller: _textController,
            onChanged: (String texto) {
              setState(() {
                _isWriting = texto.length > 0;
              });
            },
            onSubmitted: _enviarMensaje,
            decoration:
                InputDecoration.collapsed(hintText: "Envie un mensaje!"),
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 3.0),
          child: IconButton(
            icon: Icon(Icons.message),
            onPressed: _isWriting
                ? () => _enviarMensaje(_textController.text)
                : null,
          ),
        )
      ],
    ),
  ),
);

}

这是我用于初始渲染的打印捕获,在单击输入后写入一些消息

这是我的日志,应该很容易理解我应该采取的方法,但我没有任何运气。

仅供参考:我已经尝试过这种方法,但似乎没有用 StackOverflow answer on rendering

我已经阅读了 flutter.io 文档,但我不了解整个 listview 理论。如果您有一些见解,我也将不胜感激,这样我就可以深入了解它的行为方式。

【问题讨论】:

  • resizeToAvoidBottomPadding: false 可能会有所帮助.. 看看stackoverflow.com/questions/51972371/bottom-overflow-by-30px/…
  • Dinesh,你太棒了,先生,拯救了我的一天!谢谢你快速的回复。如果可以的话,请将此回复设置为回答,以便我可以结束这个问题。
  • resizeToAvoidBottomPadding 的问题是它不会将内容推到顶部,因此您不会在屏幕上看到最后一条消息。
  • 很高兴它有帮助。添加为答案

标签: android dart flutter


【解决方案1】:

resizeToAvoidBottomPadding: false 可能会有所帮助.. 看看here

正如@diegoveloper 的评论,它不会调整大小,这意味着它不会在键盘后面显示内容。根据您的用例,您可以在上述链接中选择选项 1 或 2

【讨论】:

    猜你喜欢
    • 2019-01-30
    • 2020-11-22
    • 2020-03-12
    • 2019-05-27
    • 2018-09-03
    • 2021-03-05
    • 1970-01-01
    • 2019-01-04
    • 2015-09-14
    相关资源
    最近更新 更多