Skip to content

feat(picker): onColumnChanged for dynamic data loading (fixes #817) #918

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

Open
Luozf12345 wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

feat(picker): onColumnChanged for dynamic data loading (fixes #817) #918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7214c2b
feat(picker): add onColumnChanged for dynamic data loading in multi-l…
Luozf12345 Apr 11, 2026
5f4a82e
[autofix.ci] apply automated fixes
autofix-ci[bot] Apr 11, 2026
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: 1 addition & 1 deletion tdesign-component/example/assets/api/date-time-picker_api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
| 名称 | 返回类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| showDatePicker | | required null context, String? title, double? titleHeight, Color? titleDividerColor, required DatePickerCallback? onConfirm, DatePickerCallback? onCancel, DatePickerCallback? onChange, Function(int wheelIndex, int index)? onSelectedItemChanged, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, String? rightText, TextStyle? rightTextStyle, EdgeInsets? padding, double? leftPadding, double? topPadding, double? rightPadding, double? topRadius, Color? backgroundColor, Widget? customSelectWidget, bool useYear, bool useMonth, bool useDay, bool useHour, bool useMinute, bool useSecond, bool useWeekDay, List<int> dateStart, List<int>? dateEnd, List<int>? initialDate, List<int> Function(DateTypeKey key, List<int> nums)? filterItems, double pickerHeight, int pickerItemCount, bool isTimeUnit, ItemBuilderType? itemBuilder, Color? barrierColor, Duration duration, | 显示时间选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, Duration duration, | 显示多级联动选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, ColumnChangedCallback? onColumnChanged, Duration duration, | 显示多级联动选择器 |
| showMultiPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List<List<String>> data, double pickerHeight, int pickerItemCount, List<int>? initialIndexes, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, Widget? customSelectWidget, ItemBuilderType? itemBuilder, Duration duration, Color? barrierColor, | 显示多级选择器 |

```
Expand Down
3 changes: 2 additions & 1 deletion tdesign-component/example/assets/api/picker_api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
| leftTextStyle | TextStyle? | - | 自定义左侧文案样式 |
| onCancel | MultiPickerCallback? | - | 选择器取消按钮回调 |
| onChange | MultiPickerCallback? | - | todo 选择器数据改变时回调 |
| onColumnChanged | ColumnChangedCallback? | - | 列选项变更时动态加载下级数据的回调。 |
| onConfirm | MultiPickerCallback? | - | 选择器确认按钮回调 |
| padding | EdgeInsets? | - | 适配padding |
| pickerHeight | double | 200 | |
Expand Down Expand Up @@ -91,5 +92,5 @@
| 名称 | 返回类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| showDatePicker | | required null context, String? title, double? titleHeight, Color? titleDividerColor, required DatePickerCallback? onConfirm, DatePickerCallback? onCancel, DatePickerCallback? onChange, Function(int wheelIndex, int index)? onSelectedItemChanged, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, String? rightText, TextStyle? rightTextStyle, EdgeInsets? padding, double? leftPadding, double? topPadding, double? rightPadding, double? topRadius, Color? backgroundColor, Widget? customSelectWidget, bool useYear, bool useMonth, bool useDay, bool useHour, bool useMinute, bool useSecond, bool useWeekDay, List<int> dateStart, List<int>? dateEnd, List<int>? initialDate, List<int> Function(DateTypeKey key, List<int> nums)? filterItems, double pickerHeight, int pickerItemCount, bool isTimeUnit, ItemBuilderType? itemBuilder, Color? barrierColor, Duration duration, | 显示时间选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, Duration duration, | 显示多级联动选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, ColumnChangedCallback? onColumnChanged, Duration duration, | 显示多级联动选择器 |
| showMultiPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List<List<String>> data, double pickerHeight, int pickerItemCount, List<int>? initialIndexes, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, Widget? customSelectWidget, ItemBuilderType? itemBuilder, Duration duration, Color? barrierColor, | 显示多级选择器 |
44 changes: 42 additions & 2 deletions tdesign-component/lib/src/components/picker/t_multi_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,10 @@ class TMultiPicker extends StatelessWidget {
}
}

/// 列选项变更回调，用于动态加载下级数据
typedef ColumnChangedCallback = Future<List> Function(
int columnIndex, List selectedValues);

/// 多项联动选择器
class TMultiLinkedPicker extends StatefulWidget {
/// 选择器标题
Expand Down Expand Up @@ -424,6 +428,11 @@ class TMultiLinkedPicker extends StatefulWidget {
/// 是否显示头部内容
final bool header;

/// 列选项变更时动态加载下级数据的回调。
/// 当用户切换选项时调用，返回下一级列的数据列表。
/// 设置后优先级高于静态 [data] 中对应层级的查找。
final ColumnChangedCallback? onColumnChanged;

const TMultiLinkedPicker({
this.title,
required this.onConfirm,
Expand Down Expand Up @@ -452,6 +461,7 @@ class TMultiLinkedPicker extends StatefulWidget {
this.itemBuilder,
this.keepSameSelection = false,
this.header = true,
this.onColumnChanged,
Key? key,
}) : super(key: key);

Expand Down Expand Up @@ -607,7 +617,6 @@ class _TMultiLinkedPickerState extends State<TMultiLinkedPicker> {
if (index >= model.presentData[position].length - 5 &&
model.hasMoreData[position]) {
if (model.loadMoreData(position)) {
// 延迟一下再刷新，避免连续setState
Future.delayed(const Duration(milliseconds: 50), () {
if (mounted) {
setState(() {});
Expand All @@ -616,11 +625,24 @@ class _TMultiLinkedPickerState extends State<TMultiLinkedPicker> {
}
}

/// todo 通过随机数改变高度来触发UI刷新，这是hack式的解决方案！有待优化！
/// fix https://github.com/flutter/flutter/issues/22999
pickerHeight =
pickerHeight - Random().nextDouble() / 100000000;
});

if (widget.onColumnChanged != null &&
position < widget.columnNum - 1) {
widget.onColumnChanged!(
position + 1, model.selectedData).then((newData) {
if (mounted && newData.isNotEmpty) {
setState(() {
model.updateColumnData(position + 1, newData);
pickerHeight =
pickerHeight - Random().nextDouble() / 100000000;
});
}
});
}
}
},
childDelegate: ListWheelChildBuilderDelegate(
Expand Down Expand Up @@ -889,6 +911,24 @@ class MultiLinkedPickerModel {
return false;
}

/// 外部动态更新某列数据
void updateColumnData(int columnIndex, List newData) {
if (columnIndex >= columnNum || columnIndex < 0) return;
while (presentData.length <= columnIndex) {
presentData.add([placeData]);
}
presentData[columnIndex] = newData.isEmpty ? [placeData] : newData;
currentPages[columnIndex] = 0;
hasMoreData[columnIndex] = false;
totalCounts[columnIndex] = newData.length;
selectedData[columnIndex] = newData.isNotEmpty ? newData.first : placeData;
selectedIndexes[columnIndex] = 0;
while (controllers.length <= columnIndex) {
controllers.add(FixedExtentScrollController(initialItem: 0));
}
controllers[columnIndex].jumpToItem(0);
}

/// [position] 变动的列
/// [selectedIndex] 对应选中的index
/// [jump] 是否需要jumpToItem
Expand Down
2 changes: 2 additions & 0 deletions tdesign-component/lib/src/components/picker/t_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ class TPicker {
// ItemDistanceCalculator? itemDistanceCalculator,
bool keepSameSelection = false,
Color? barrierColor,
ColumnChangedCallback? onColumnChanged,

/// todo 未传参
Duration duration = const Duration(milliseconds: 100),
Expand Down Expand Up @@ -231,6 +232,7 @@ class TPicker {
itemBuilder: itemBuilder,
customSelectWidget: customSelectWidget,
keepSameSelection: keepSameSelection,
onColumnChanged: onColumnChanged,
// itemDistanceCalculator: itemDistanceCalculator,
);
},
Expand Down
2 changes: 1 addition & 1 deletion tdesign-site/src/date-time-picker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ import 'package:tdesign_flutter/tdesign_flutter.dart';
| 名称 | 返回类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| showDatePicker | | required null context, String? title, double? titleHeight, Color? titleDividerColor, required DatePickerCallback? onConfirm, DatePickerCallback? onCancel, DatePickerCallback? onChange, Function(int wheelIndex, int index)? onSelectedItemChanged, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, String? rightText, TextStyle? rightTextStyle, EdgeInsets? padding, double? leftPadding, double? topPadding, double? rightPadding, double? topRadius, Color? backgroundColor, Widget? customSelectWidget, bool useYear, bool useMonth, bool useDay, bool useHour, bool useMinute, bool useSecond, bool useWeekDay, List<int> dateStart, List<int>? dateEnd, List<int>? initialDate, List<int> Function(DateTypeKey key, List<int> nums)? filterItems, double pickerHeight, int pickerItemCount, bool isTimeUnit, ItemBuilderType? itemBuilder, Color? barrierColor, Duration duration, | 显示时间选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, Duration duration, | 显示多级联动选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, ColumnChangedCallback? onColumnChanged, Duration duration, | 显示多级联动选择器 |
| showMultiPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List<List<String>> data, double pickerHeight, int pickerItemCount, List<int>? initialIndexes, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, Widget? customSelectWidget, ItemBuilderType? itemBuilder, Duration duration, Color? barrierColor, | 显示多级选择器 |

```
Expand Down
3 changes: 2 additions & 1 deletion tdesign-site/src/picker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,7 @@ import 'package:tdesign_flutter/tdesign_flutter.dart';
| leftTextStyle | TextStyle? | - | 自定义左侧文案样式 |
| onCancel | MultiPickerCallback? | - | 选择器取消按钮回调 |
| onChange | MultiPickerCallback? | - | todo 选择器数据改变时回调 |
| onColumnChanged | ColumnChangedCallback? | - | 列选项变更时动态加载下级数据的回调。 |
| onConfirm | MultiPickerCallback? | - | 选择器确认按钮回调 |
| padding | EdgeInsets? | - | 适配padding |
| pickerHeight | double | 200 | |
Expand Down Expand Up @@ -292,7 +293,7 @@ import 'package:tdesign_flutter/tdesign_flutter.dart';
| 名称 | 返回类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| showDatePicker | | required null context, String? title, double? titleHeight, Color? titleDividerColor, required DatePickerCallback? onConfirm, DatePickerCallback? onCancel, DatePickerCallback? onChange, Function(int wheelIndex, int index)? onSelectedItemChanged, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, String? rightText, TextStyle? rightTextStyle, EdgeInsets? padding, double? leftPadding, double? topPadding, double? rightPadding, double? topRadius, Color? backgroundColor, Widget? customSelectWidget, bool useYear, bool useMonth, bool useDay, bool useHour, bool useMinute, bool useSecond, bool useWeekDay, List<int> dateStart, List<int>? dateEnd, List<int>? initialDate, List<int> Function(DateTypeKey key, List<int> nums)? filterItems, double pickerHeight, int pickerItemCount, bool isTimeUnit, ItemBuilderType? itemBuilder, Color? barrierColor, Duration duration, | 显示时间选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, Duration duration, | 显示多级联动选择器 |
| showMultiLinkedPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List initialData, required Map data, required int columnNum, double pickerHeight, int pickerItemCount, Widget? customSelectWidget, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, ItemBuilderType? itemBuilder, bool keepSameSelection, Color? barrierColor, ColumnChangedCallback? onColumnChanged, Duration duration, | 显示多级联动选择器 |
| showMultiPicker | | required null context, String? title, required MultiPickerCallback? onConfirm, MultiPickerCallback? onCancel, required List<List<String>> data, double pickerHeight, int pickerItemCount, List<int>? initialIndexes, String? rightText, String? leftText, TextStyle? leftTextStyle, TextStyle? centerTextStyle, TextStyle? rightTextStyle, double? titleHeight, double? topPadding, double? leftPadding, double? rightPadding, Color? titleDividerColor, Color? backgroundColor, double? topRadius, EdgeInsets? padding, Widget? customSelectWidget, ItemBuilderType? itemBuilder, Duration duration, Color? barrierColor, | 显示多级选择器 |


Expand Down
Loading