在这里,我使用容器创建表格,并基于使用弹性编号进行扩展,以使标题和行相关。我认为这不是最好的方法,但我不知道如何创建这样的表,任何人都可以给我一个建议吗?
这是代码:
_tableSection
Widget _bookingListSection(OnlineBookingListController controller) {
return Column(
children: [
_buildHeaderTable(),
Expanded(
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: controller.listBooking.length,
itemBuilder: (context, index) {
int lastIndex = controller.listBooking.length - 1;
return _buildContentTable(
index,
lastIndex,
context,
controller,
);
},
),
),
],
);
}
_buildHeaderTable(),
Widget _buildHeaderTable() {
return Container(
width: double.maxFinite,
height: AppSize.DIMEN_64.h,
padding: EdgeInsets.fromLTRB(
AppSize.DIMEN_22.h,
AppSize.DIMEN_16.h,
AppSize.DIMEN_22.h,
AppSize.DIMEN_16.h,
),
decoration: BoxDecoration(
color: AppColors.GREY_BLACK_BACKGROUND,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(AppSize.RADIUS_8.h),
topRight: Radius.circular(AppSize.RADIUS_8.h),
),
),
child: Row(children: [
_titleHeaderTable('Time', 3),
_titleHeaderTable('Phone Number', 3),
_titleHeaderTable('Customer Name', 3),
_titleHeaderTable('Room', 3),
_titleHeaderTable('Waitress', 3),
_titleHeaderTable('Status', 2),
_titleHeaderTable('Action', 4),
]),
);
}
Widget _titleHeaderTable(String title, int flexNum) {
return Expanded(
flex: flexNum,
child: Container(
child: Text(
title,
textAlign: TextAlign.left,
maxLines: 2,
style: textStyleW700S14.copyWith(
color: AppColors.WHITE,
),
),
),
);
}
然后对于内容我在行内使用flex。您对此有什么建议吗?
最佳答案
您可以使用Table
和Data Table
在Flutter中创建Table
- 使用表类:
引用Table
类here
Container(
margin: EdgeInsets.all(20),
child: Table(
defaultColumnWidth: FixedColumnWidth(120.0),
border: TableBorder.all(
color: Colors.black, style: BorderStyle.solid, width: 2),
children: [
TableRow(children: [
Column(
children: [
Text(
'Website',
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: [
Text(
'Tutorial',
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: [
Text(
'Review',
style: TextStyle(fontSize: 20.0),
),
],
),
]),
TableRow(children: [
Column(
children: [
Text('https://flutter.dev/'),
],
),
Column(
children: [
Text('Flutter'),
],
),
Column(
children: [
Text('5*'),
],
),
]),
TableRow(children: [
Column(
children: [
Text('https://dart.dev/'),
],
),
Column(
children: [
Text('Dart'),
],
),
Column(
children: [
Text('5*'),
],
),
]),
TableRow(children: [
Column(
children: [
Text('https://pub.dev/'),
],
),
Column(
children: [
Text('Flutter Packages'),
],
),
Column(
children: [
Text('5*'),
],
),
]),
],
),
),
- 使用
DataTable
类:
引用DataTable
类here
DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Sr.No',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Website',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Tutorial',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Review',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text('1'),
),
DataCell(
Text('https://flutter.dev/'),
),
DataCell(
Text('Flutter'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('2'),
),
DataCell(
Text('https://dart.dev/'),
),
DataCell(
Text('Dart'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('3'),
),
DataCell(
Text('https://pub.dev/'),
),
DataCell(
Text('Flutter Packages'),
),
DataCell(
Text('5*'),
),
],
),
],
),
您可以引用this也适用于 Table
关于flutter - 在 Flutter 中创建表的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70676159/