在這里，我使用容器創建表，并基于使用 flex 編號擴展以使標題和行相關。我認為這不是最好的方法，但我不知道如何創建這樣的表格，任何人都可以給我一個建議嗎？
這是代碼：
_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 的內容。你對這個有什么建議嗎？
uj5u.com熱心網友回復：
Table您可以使用和在 Flutter 中創建表格Data Table
- 使用表類：
- 使用
DataTable類：
你也可以參考這個包Table
uj5u.com熱心網友回復：
Flutter 為此提供了一個 Table 類（但您也可以使用簡單的 Row Column 組合來實作）。
這是 Table 檔案的鏈接：Flutter Table
Container(
color: Colors.white,
padding: EdgeInsets.all(20.0),
child: Table(
border: TableBorder.all(color: Colors.black),
children: [
TableRow(children: [
Text('Cell 1'),
Text('Cell 2'),
Text('Cell 3'),
]),
TableRow(children: [
Text('Cell 4'),
Text('Cell 5'),
Text('Cell 6'),
])
],
),
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/409985.html
標籤：