flutter - 如何在 DataTable 小部件中滚动 DataRow 项目
问题描述
我有DataTable小部件包含四个DataColumn和许多DataRow,如图所示:
问题是我无法滚动带有 Keeping 标题的DataRow项目,
我尝试了SingleChildScrollView Widget 但无济于事,结果是:
我想要的只是滚动内容 DataTable而不是整个DataTable。
谢谢...
解决方案
您需要创建自己的表格小部件:
import 'dart:math';
import 'package:flutter/material.dart';
Random random = Random();
void main() => runApp(
MyApp(),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Stackoverflow'),
),
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
String getRandomDateString() =>
DateTime.now().subtract(Duration(days: random.nextInt(100))).toString();
List<String> generateMockRowData() => [
random.nextInt(10000).toString(),
random.nextInt(10000).toString(),
random.nextInt(10000).toString(),
getRandomDateString()
];
List<List<String>> mockData =
List<List<String>>.generate(300, (_) => generateMockRowData());
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xFFF4F1F1),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(height: 10),
_header(),
SizedBox(height: 10),
Divider(
height: 1,
),
Flexible(
child: ListView.separated(
itemBuilder: (_, index) {
return Padding(
padding: EdgeInsets.only(top: index == 0 ? 10 : 0),
child: _getRow(mockData[index]),
);
},
separatorBuilder: (_, __) => Divider(),
itemCount: mockData.length,
),
)
],
),
);
}
_header() {
return Row(
children: <Widget>[
_element(Text(
'Col4',
textAlign: TextAlign.end,
)),
_element(Text(
'Col3',
textAlign: TextAlign.end,
)),
_element(Text(
'Col2',
textAlign: TextAlign.end,
)),
_element(
Text(
'Col1',
textAlign: TextAlign.end,
),
2),
],
);
}
Flexible _element(Widget widget, [flex = 1]) {
return Flexible(
fit: FlexFit.tight,
flex: flex,
child: widget,
);
}
Widget _getRow(List<String> data) {
return Row(
children: [
_element(Text(
data[0],
textAlign: TextAlign.end,
)),
_element(Text(
data[1],
textAlign: TextAlign.end,
)),
_element(Text(
data[2],
textAlign: TextAlign.end,
)),
_element(
Text(
data[3],
textAlign: TextAlign.end,
),
2),
],
);
}
}
推荐阅读
- ruby-on-rails - ActiveStorage 中的文件可以在没有父(模型)ID 的情况下上传吗?
- ansible - Ansible 使用具有不同 ansible_ssh_common_args 的 delegate_to
- python - np.subtract() - ValueError 用 numpy 减去列表
- android - 无法获取外部文件目录。外部存储状态在 Android 上挂载
- kubernetes - Kubernetes 不允许删除部署 - 服务器找不到请求的资源
- angular - 来自 API 的数据未显示在 Angular html 模板中
- windows - 匹配两个列表并使用 Powershell 查找卸载字符串
- reactjs - 使用单个 onChange 反应钩子处理多个文本字段
- flutter - 如何解决颤振中的 gradle 错误?
- javascript - 仅在用户使用角度、打字稿确认时切换开关