Flutter resizeToAvoidBottomInset true 不适用于扩展 ListView [英] Flutter resizeToAvoidBottomInset true not working with Expanded ListView

问题描述

键盘隐藏了我的 ListView (GroupedListView).我认为这是因为 Expanded 小部件.

The keyboard hides my ListView (GroupedListView). I think it's because of the Expanded Widget.

我的身体:

Column(
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GroupedListView<dynamic, String>(
              controller: _scrollController,
              keyboardDismissBehavior:
                    ScrollViewKeyboardDismissBehavior.onDrag,
              physics: const BouncingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics()),
              itemBuilder: (context, message) {
                  return ListTile(
                      title: ChatBubble(message),
                  );
                },
              elements: messages,
              groupBy: (message) => DateFormat('MMMM dd,yyyy')
                    .format(message.timestamp.toDate()),
              groupSeparatorBuilder: (String groupByValue) =>
                    getMiddleChatBubble(context, groupByValue),
              itemComparator: (item1, item2) =>
                    item1.timestamp.compareTo(item2.timestamp),
              useStickyGroupSeparators: false,
              floatingHeader: false,
              order: GroupedListOrder.ASC,
              ),
            ),
          ),
          WriteMessageBox(
              group: group,
              groupId: docs[0].id,
              tokens: [widget.friendToken])
        ],
      );

为什么 resizeToAvoidBottomInset 不起作用?

我已向 Flutter 团队提出问题

I have opened an issue to the Flutter team

推荐答案

简而言之:使用reversed: true.

您看到的是预期行为，原因如下:

What you see is the expected behavior for the following reason:

ListView 在屏幕上的某些内容调整大小时保留其滚动偏移量.这个偏移量是列表从开始滚动到多少像素.默认情况下，从顶部开始计数，列表从底部增长.

ListView preserves its scroll offset when something on your screen resizes. This offset is how many pixels the list is scrolled to from the beginning. By default the beginning counts from the top and the list grows to bottom.

如果使用reversed: true，滚动位置从底部开始计算，所以最底部位置为0，列表从底部往顶部增长.它有很多好处:

If you use reversed: true, the scroll position counts from the bottom, so the bottommost position is 0, and the list grows from bottom to the top. It has many benefits:

1. 0 的最底部位置在键盘打开时保留.任何其他职位也是如此.在任何位置，列表似乎都移到了顶部，最后一个可见元素仍然是最后一个可见元素.

1. The bottommost position of 0 is preserved when the keyboard opens. So does any other position. At any position it just appears that the list shifts to the top, and the last visible element remains the last visible element.

当您从数据库中获取消息时，更容易对消息进行排序和分页.您只需按日期时间降序排序并附加到列表中，无需在将对象列表提供给 ListView 之前反转它.

Its easier to sort and paginate messages when you get them from the DB. You just sort by datetime descending and append to the list, no need to reverse the object list before feeding it to the ListView.

它只是在没有监听器和控制器操作的情况下工作.声明式解决方案通常更可靠.

It just works with no listeners and the controller manipulations. Declarative solutions are more reliable in general.

经验法则是反转在顶部加载更多项目的分页列表.

示例如下:

import 'package:flutter/material.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: 30,
                reverse: true,
                itemBuilder: (context, i) => ListTile(title: Text('Item $i')),
              ),
            ),
            const TextField(),
          ],
        ),
      ),
    );
  }
}

至于 resizeToAvoidBottomInset，它完成了它的工作.Scaffold 确实在键盘打开时缩短了.ListView 也是如此.所以它显示的项目更少.对于非倒排列表，gone 是最底部的.

As for resizeToAvoidBottomInset, it does its job. The Scaffold is indeed shortened with the keyboard on. So is ListView. So it shows you less items. For non-reversed list, gone are the bottommost.

这篇关于Flutter resizeToAvoidBottomInset true 不适用于扩展 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！