我完全需要一个可滚动的数据表与刷新的可能性下拉之间的页眉和页脚固定宽度小部件。
我有一个小部件,在我的应用程序的每个页面上使用。这个小部件返回一个带有appbar和body的Scaffold,如column()。这个小部件使用类似CommonPage(title, widgetsArrayForBodyColumn)从其他小部件。现在我需要在该主体中使用跟随小部件:查找(用于过滤或例如,任何固定高度的小部件)数据表(用于显示数据)卡片(显示其他数据)
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(...),
),
),
),
],
),
],
),
);
我找到了解决方案:
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(...),
),
],
),
);