Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TDTable]新增table组件 #244

Merged
merged 10 commits into from
Sep 26, 2024
Merged

[TDTable]新增table组件 #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d5fa8f1
table组件开发
ccXxx1aoBai Jul 19, 2024
ef4d4a1
组件开发完成
ccXxx1aoBai Jul 20, 2024
51a5516
table组件loading效果，loading组件设置默认图标
ccXxx1aoBai Jul 25, 2024
1962187
Merge remote-tracking branch 'remotes/origin/merge_table' into featur…
ccXxx1aoBai Jul 25, 2024
9322e44
check spelling
ccXxx1aoBai Jul 25, 2024
0be5a94
组件视觉走查
ccXxx1aoBai Aug 12, 2024
2d7ecaf
Update config.dart
ccXxx1aoBai Sep 4, 2024
2c8fef0
删除错误引用
ccXxx1aoBai Sep 26, 2024
b7f70b3
示例操作列内容居中问题
ccXxx1aoBai Sep 26, 2024
41a4893
Merge branch 'develop' into feature/table
Luozf12345 Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions tdesign-component/demo_tool/all_build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@
# sticky
# swiper
./bin/demo_tool generate --folder ../lib/src/components/swiper --name TDSwiperPagination,TDPageTransformer --folder-name swiper --output ../example/assets/api/ --only-api --get-comments
# table
./bin/demo_tool generate --folder ../lib/src/components/table --name TDTable --folder-name table --output ../example/assets/api/ --only-api
# tag
./bin/demo_tool generate --folder ../lib/src/components/tag --name TDTag,TDSelectTag,TDTagStyle --folder-name tag --output ../example/assets/api/ --only-api

Expand Down
2 changes: 2 additions & 0 deletions tdesign-component/example/lib/config.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import 'page/td_steps_page.dart';
import 'page/td_swipe_cell_page.dart';
import 'page/td_swiper_page.dart';
import 'page/td_switch_page.dart';
import 'page/td_table_page.dart';
import 'page/td_tabs_page.dart';
import 'page/td_tag_page.dart';
import 'page/td_text_page.dart';
Expand Down Expand Up @@ -204,6 +205,7 @@ Map<String, List<ExamplePageModel>> exampleMap = {
pageBuilder: _wrapInheritedTheme((context) => const TodoPage())),
ExamplePageModel(
text: 'Swiper 轮播图', name: 'swiper', pageBuilder: _wrapInheritedTheme((context) => const TDSwiperPage())),
ExamplePageModel(text: 'Table 表格', name: 'table', pageBuilder: _wrapInheritedTheme((context) => const TDTablePage())),
ExamplePageModel(text: 'Tag 标签', name: 'tag', pageBuilder: _wrapInheritedTheme((context) => const TDTagPage())),
],
'反馈': [
Expand Down
359 changes: 359 additions & 0 deletions tdesign-component/example/lib/page/td_table_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,359 @@
import 'package:flutter/cupertino.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../annotation/demo.dart';
import '../base/example_widget.dart';

class TDTablePage extends StatelessWidget {
const TDTablePage({Key? key}) : super(key: key);

List<dynamic> _getData(int index) {
var data = <dynamic>[];
for (var i = 0; i < 10; i++) {
if (i == index) {
data.add({
'title1': '内容内容内容内容',
'title2': '内容',
'title3': '内容',
'title4': '内容',
});
} else {
data.add({
'title1': '内容',
'title2': '内容',
'title3': '内容',
'title4': '内容',
});
}
}
return data;
}

List<dynamic> _getData2() {
var data = <dynamic>[];
for (var i = 0; i < 10; i++) {
if (i == 0) {
data.add({
'title1': '横向平铺内容不省略',
'title2': '横向平铺内容不省略',
'title3': '横向平铺内容不省略',
});
} else {
data.add({
'title1': '内容',
'title2': '内容',
'title3': '内容',
});
}
}
return data;
}

@override
Widget build(BuildContext context) {
return ExamplePage(
title: tdTitle(context),
desc: '表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。',
exampleCodeGroup: 'table',
children: [
ExampleModule(
title: '组件类型',
children: [
ExampleItem(desc: '基础表格', builder: _basicTable),
ExampleItem(desc: '可排序表格', builder: _sortableTable),
ExampleItem(desc: '带操作或按钮表格', builder: _operationBtnTable),
ExampleItem(builder: _operationIconTable, padding: const EdgeInsets.only(top: 16)),
ExampleItem(desc: '可固定首列表格', builder: _fixedFirstColTable),
ExampleItem(desc: '可固定尾列表格', builder: _fixedEndColTable),
ExampleItem(desc: '横向平铺可滚动表格', builder: _horizontalScrollTable),
],
),
ExampleModule(title: '组件样式', children: [
ExampleItem(desc: '带斑马纹表格样式', builder: _stripeTable),
ExampleItem(desc: '带边框表格样式', builder: _borderTable),
]),
],
test: [
ExampleItem(desc: '固定表头', builder: _fixedHeaderTable),
ExampleItem(desc: '固定列尾+滚动表格', builder: _fixedScrollTable),
ExampleItem(desc: '内容居中表格', builder: _centerTable),
ExampleItem(desc: '空数据表格', builder: _emptyTable),
ExampleItem(desc: '加载动画表格', builder: _loadingTable),
],
);
}

@Demo(group: 'table')
Widget _basicTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _sortableTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true, sortable: true),
TDTableCol(title: '标题', colKey: 'title2', sortable: true),
TDTableCol(title: '标题', colKey: 'title3', sortable: true),
TDTableCol(title: '标题', colKey: 'title4', sortable: true)
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _operationBtnTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(
title: '标题',
colKey: 'title4',
cellBuilder: (BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TDText(
'修改',
forceVerticalCenter: true,
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
height: 1,
),
),
TDText(
'通过',
forceVerticalCenter: true,
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
height: 1,
),
),
],
);
},
)
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _operationIconTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(
title: '标题',
colKey: 'title4',
cellBuilder: (BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(TDIcons.upload, color: TDTheme.of(context).brandNormalColor, size: 16),
Icon(TDIcons.delete, color: TDTheme.of(context).brandNormalColor, size: 16),
],
);
},
)
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _fixedFirstColTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1'),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4', fixed: TDTableColFixed.left),
],
data: _getData(10),
);
}

@Demo(group: 'table')
Widget _fixedEndColTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1'),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(
title: '标题',
colKey: 'title4',
fixed: TDTableColFixed.right,
cellBuilder: (BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TDText(
'修改',
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
),
),
TDText(
'通过',
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
),
),
],
);
},
),
],
data: _getData(10),
);
}

@Demo(group: 'table')
Widget _horizontalScrollTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', width: 160),
TDTableCol(title: '标题', colKey: 'title2', width: 160),
TDTableCol(title: '标题', colKey: 'title3', width: 160),
],
data: _getData2(),
);
}

@Demo(group: 'table')
Widget _stripeTable(BuildContext context) {
return TDTable(
stripe: true,
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _borderTable(BuildContext context) {
return TDTable(
bordered: true,
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _fixedHeaderTable(BuildContext context) {
return TDTable(
bordered: true,
height: 240,
columns: [
TDTableCol(title: '标题', colKey: 'title1', ellipsis: true),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
data: _getData(9),
);
}

@Demo(group: 'table')
Widget _fixedScrollTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', width: 200),
TDTableCol(title: '标题', colKey: 'title2', width: 160),
TDTableCol(title: '标题', colKey: 'title3', width: 160),
TDTableCol(
title: '标题',
colKey: 'title4',
fixed: TDTableColFixed.right,
cellBuilder: (BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TDText(
'修改',
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
),
),
TDText(
'通过',
style: TextStyle(
color: TDTheme.of(context).brandNormalColor,
fontSize: 14,
),
),
],
);
},
),
],
data: _getData2(),
);
}

@Demo(group: 'table')
Widget _centerTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1', align: TDTableColAlign.center),
TDTableCol(title: '标题', colKey: 'title2', align: TDTableColAlign.center),
TDTableCol(title: '标题', colKey: 'title3', align: TDTableColAlign.center),
TDTableCol(title: '标题', colKey: 'title4', align: TDTableColAlign.center)
],
data: _getData(10),
);
}

@Demo(group: 'table')
Widget _emptyTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1'),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
);
}

@Demo(group: 'table')
Widget _loadingTable(BuildContext context) {
return TDTable(
columns: [
TDTableCol(title: '标题', colKey: 'title1'),
TDTableCol(title: '标题', colKey: 'title2'),
TDTableCol(title: '标题', colKey: 'title3'),
TDTableCol(title: '标题', colKey: 'title4')
],
loading: true,
);
}
}
2 changes: 1 addition & 1 deletion tdesign-component/lib/src/components/loading/td_loading.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class TDLoading extends StatelessWidget {
const TDLoading({
Key? key,
required this.size,
this.icon,
this.icon = TDLoadingIcon.circle,
this.iconColor,
this.axis = Axis.vertical,
this.text,
Expand Down
Loading