在 fixedWidth 小部件之间添加可滚动和可刷新的数据表

Posted 2023-03-07

【中文标题】在 fixedWidth 小部件之间添加可滚动和可刷新的数据表

【英文标题】：Add scrollable and refreshable data table between fixedWidth widgets

【发布时间】：2021-09-27 09:07:10

【问题描述】：

我完全需要一个可滚动的 DataTable，在页眉和页脚固定宽度小部件之间下拉时可以刷新。

我有一个小部件，在我的应用程序的每个页面上使用。这个小部件返回一个带有 appbar 和 body 的 Scaffold，如 column ()。此小部件与其他小部件中的 CommonPage(title, widgetsArrayForBodyColumn) 一样使用。 现在我需要在该正文中使用以下小部件： 查找（用于过滤或例如任何固定高度的小部件） DataTable（用于显示数据） 卡片（显示其他数据）

DataTable 在下拉时应该是可滚动和可刷新的。 我尝试了很多不同的方法，但仍然没有成功。我的最后一个解决方案是使用堆栈，但列表隐藏在卡片旁边。

我不明白如何实现我的目标：在列中的不可滚动小部件之间刷新数据表。

class CommonPage extends StatefulWidget 
  final String title;
  final List<Widget> children;

  const CommonPage(
    Key? key,
    required this.title,
    required this.children,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
return Scaffold(
...
body: Column(children: [
FixedHeightWidget(),
PageScreen(),
]);

class PageScreen 
@override
  Widget build(BuildContext context) 
return CommonPage(
        title: Title,
        children: [
        FixedHeightWidget(),
          PageList(),
        ],
      );
    

class PageList 
  Widget build(BuildContext context) 
//TODO Return fixedWidthWidget at top, expandedRefreshableScrollableDataTable, fixedWidthWidget at bottom

我目前的解决方案：（几乎达到了我的目标，但如前所述，卡片隐藏了列表的一部分，无法滚动和检查列表底部）：

return Expanded(
              child: Stack(
                children: [
                  RefreshIndicator(
                    onRefresh: onRefresh,
                    child: ListView(
                      children: [
                        listItems.isNotEmpty
                            ? DataTable(...)
                            : Container(),
                      ],
                    ),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        alignment: Alignment.bottomCenter,
                        child: Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 5),
                child: Card(...),
),
),
                      ),
                    ],
                  ),
                ],
              ),
            );

【参考方案1】：

我找到了解决办法：

return Expanded(
              child: Column(
                children: [
                  Expanded(
                    child: RefreshIndicator(
                      onRefresh: onRefresh,
                      child: ListView(
                        children: [listItems.isNotEmpty
                            ? DataTable(...)
                            : Container(),
                        ],
                      ),
                    ),
                  ),
 Padding(
                padding: EdgeInsets.symmetric(horizontal: 5),
                child: Card(...),
),
                ],
              ),
            );