diff --git a/tdesign-component/example/lib/page/td_calendar_page.dart b/tdesign-component/example/lib/page/td_calendar_page.dart index 10f9cb90c..3cd81ff6b 100644 --- a/tdesign-component/example/lib/page/td_calendar_page.dart +++ b/tdesign-component/example/lib/page/td_calendar_page.dart @@ -33,6 +33,14 @@ class TDCalendarPage extends StatelessWidget { return const CodeWrapper(builder: _buildStyle); }, ), + ExampleItem( + desc: '自定义日期单元格', + ignoreCode: true, + center: false, + builder: (BuildContext context) { + return const CodeWrapper(builder: _buildCustomCell); + }, + ), ExampleItem( desc: '不使用Popup', ignoreCode: true, @@ -351,3 +359,74 @@ Widget _buildBlock(BuildContext context) { ], ); } + +@Demo(group: 'calendar') +Widget _buildCustomCell(BuildContext context) { + final size = MediaQuery.of(context).size; + final selected = ValueNotifier>([DateTime.now().millisecondsSinceEpoch + 30 * 24 * 60 * 60 * 1000]); + return ValueListenableBuilder( + valueListenable: selected, + builder: (context, value, child) { + final date = DateTime.fromMillisecondsSinceEpoch(value[0]); + return TDCellGroup( + cells: [ + TDCell( + title: '自定义日期单元格', + arrow: true, + note: '${date.year}-${date.month}-${date.day}', + onClick: (cell) { + TDCalendarPopup( + context, + visible: true, + onConfirm: (value) { + print('onConfirm:$value'); + selected.value = value; + }, + onClose: () { + print('onClose'); + }, + child: TDCalendar( + title: '请选择日期', + value: value, + height: size.height * 0.6 + 176, + onCellClick: (value, type, tdate) { + print('onCellClick:$value'); + }, + onCellLongPress: (value, type, tdate) { + print('onCellLongPress:$value'); + }, + onHeaderClick: (index, week) { + print('onHeaderClick:$week'); + }, + onChange: (value) { + print('onChange:$value'); + }, + cellWidget: (context, tdate, selectType) { + if (selectType == DateSelectType.selected) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text('${tdate.date.day}', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)), + Text('文案文案', style: TextStyle(fontSize: 6, color: Colors.white)), + Text('自定义', style: TextStyle(fontSize: 12, color: Colors.white)), + ], + ); + } + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text('${tdate.date.day}', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), + Text('文案文案', style: TextStyle(fontSize: 8)), + Text('自定义', style: TextStyle(fontSize: 8)), + ], + ); + } + ), + ); + }, + ), + ], + ); + }, + ); +} diff --git a/tdesign-component/lib/src/components/calendar/td_calendar.dart b/tdesign-component/lib/src/components/calendar/td_calendar.dart index 81417b6ab..9c7a8e2ed 100644 --- a/tdesign-component/lib/src/components/calendar/td_calendar.dart +++ b/tdesign-component/lib/src/components/calendar/td_calendar.dart @@ -46,6 +46,7 @@ class TDCalendar extends StatefulWidget { this.pickerItemCount = 3, this.isTimeUnit = true, this.animateTo = false, + this.cellWidget, }) : super(key: key); /// 第一天从星期几开始,默认 0 = 周日 @@ -123,6 +124,9 @@ class TDCalendar extends StatefulWidget { /// 动画滚动到指定位置 final bool? animateTo; + /// 自定义日期单元格组件 + final Widget? Function(BuildContext context, TDate tdate, DateSelectType selectType)? cellWidget; + List? get _value => value?.map((e) { final date = DateTime.fromMillisecondsSinceEpoch(e); return DateTime(date.year, date.month, date.day); @@ -235,6 +239,7 @@ class _TDCalendarState extends State { dateList: dateList, rowIndex: rowIndex, colIndex: colIndex, + cellWidget: widget.cellWidget, ); }, ), diff --git a/tdesign-component/lib/src/components/calendar/td_calendar_cell.dart b/tdesign-component/lib/src/components/calendar/td_calendar_cell.dart index 6bbd44ab1..c05ae9f96 100644 --- a/tdesign-component/lib/src/components/calendar/td_calendar_cell.dart +++ b/tdesign-component/lib/src/components/calendar/td_calendar_cell.dart @@ -18,6 +18,7 @@ class TDCalendarCell extends StatefulWidget { required this.rowIndex, required this.colIndex, required this.dateList, + this.cellWidget, }) : super(key: key); final TDate? tdate; @@ -32,6 +33,7 @@ class TDCalendarCell extends StatefulWidget { final int rowIndex; final int colIndex; final List dateList; + final Widget? Function(BuildContext context, TDate tdate, DateSelectType selectType)? cellWidget; @override _TDCalendarCellState createState() => _TDCalendarCellState(); @@ -72,6 +74,44 @@ class _TDCalendarCellState extends State { final cellStyle = TDCalendarStyle.cellStyle(context, widget.tdate!._type); final decoration = tdate.decoration ?? cellStyle.cellDecoration; final positionColor = _getColor(cellStyle, decoration); + + // 新增自定义cell内容判断逻辑 + final content = widget.cellWidget?.call(context, tdate, widget.tdate!._type) ?? + Column( + children: [ + Expanded( + flex: 2, + child: tdate.prefixWidget ?? + TDText( + tdate.prefix ?? '', + style: tdate.prefixStyle ?? cellStyle.cellPrefixStyle, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + Expanded( + flex: 3, + child: Center( + child: TDText( + forceVerticalCenter: true, + widget.tdate!.date.day.toString(), + style: (isToday ? cellStyle.todayStyle : null) ?? tdate.style ?? cellStyle.cellStyle, + ), + ), + ), + Expanded( + flex: 2, + child: tdate.suffixWidget ?? + TDText( + tdate.suffix ?? '', + style: tdate.suffixStyle ?? cellStyle.cellSuffixStyle, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + ], + ); + return GestureDetector( behavior: HitTestBehavior.translucent, onTap: _cellTap, @@ -87,40 +127,7 @@ class _TDCalendarCellState extends State { height: widget.height, decoration: decoration, padding: EdgeInsets.all(widget.padding), - child: Column( - children: [ - Expanded( - flex: 2, - child: tdate.prefixWidget ?? - TDText( - tdate.prefix ?? '', - style: tdate.prefixStyle ?? cellStyle.cellPrefixStyle, - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - ), - Expanded( - flex: 3, - child: Center( - child: TDText( - forceVerticalCenter: true, - widget.tdate!.date.day.toString(), - style: (isToday ? cellStyle.todayStyle : null) ?? tdate.style ?? cellStyle.cellStyle, - ), - ), - ), - Expanded( - flex: 2, - child: tdate.suffixWidget ?? - TDText( - tdate.suffix ?? '', - style: tdate.suffixStyle ?? cellStyle.cellSuffixStyle, - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - ), - ], - ), + child: content, // 使用自定义内容 ), if (widget.colIndex < 6) Positioned(