Flutter如何在固定宽高组件间实现可下拉刷新的滚动DataTable

问题根因 #

你当前使用Stack层叠布局的实现方案中，底部Card和列表属于堆叠关系，Card会始终覆盖在ListView下层内容的上方，导致列表滚动到底部时，底部内容被遮挡无法查看。

解决方案 #

放弃Stack层叠布局，改用垂直Column线性布局，将三个组件按「顶部固定筛选组件->中间可滚动列表->底部固定Card」的顺序排列，中间可滚动区域通过Expanded占据上下固定组件之外的所有剩余高度，既可以保证下拉刷新功能正常，也不会出现内容遮挡问题。

代码修改 #

1. 修改PageScreen中CommonPage的调用逻辑 #

给PageList外层包裹Expanded，保证PageList可以占用CommonPage body Column中除了顶部公共组件之外的所有剩余空间：

class PageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CommonPage(
      title: Title,
      children: [
        FixedHeightWidget(), // Lookup筛选组件
        Expanded(child: PageList()), // 给PageList包Expanded占满剩余空间
      ],
    );
  }
}

2. 修改PageList的实现逻辑 #

class PageList extends StatelessWidget {
  final Future<void> Function() onRefresh; // 下拉刷新逻辑
  final List<dynamic> listItems; // 列表数据
  // 构造方法省略

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        // 如需在PageList内部再放顶部固定组件，可放在此处
        // 中间可滚动区域，占Column剩余全部空间
        Expanded(
          child: RefreshIndicator(
            onRefresh: onRefresh,
            child: ListView(
              // 保证内容不足一屏时也能触发下拉刷新
              physics: const AlwaysScrollableScrollPhysics(),
              children: [
                if (listItems.isNotEmpty)
                  // 如果表格需要横向滚动，外层再包一个SingleChildScrollView设置scrollDirection为Axis.horizontal
                  DataTable(...),
                // 可在此处添加空状态、加载更多等组件
              ],
            ),
          ),
        ),
        // 底部固定Card，不会遮挡列表内容
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          child: Card(...),
        ),
      ],
    );
  }
}

额外优化点 #

• 如果DataTable列数过多超出屏幕宽度，可在DataTable外层包裹SingleChildScrollView(scrollDirection: Axis.horizontal)实现横向滚动
• 列表无数据时可替换为自定义空状态组件，提升交互体验

内容的提问来源于stack exchange，提问作者Andrey Kucher