Skip to content

Commit

Permalink
Merge pull request #244 from ccXxx1aoBai/feature/table
Browse files Browse the repository at this point in the history 
[TDTable]新增table组件
  • Loading branch information
@Luozf12345
Luozf12345 authored Sep 26, 2024
2 parents d635a46 + 41a4893 commit d395bf3
Show file tree
Hide file tree
Showing 6 changed files with 1,043 additions and 1 deletion.
2 changes: 2 additions & 0 deletions tdesign-component/demo_tool/all_build.sh
View file
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
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
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
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

0 comments on commit d395bf3

Please sign in to comment.