diff --git a/tdesign-component/example/assets/api/indexes_api.md b/tdesign-component/example/assets/api/indexes_api.md index 81168ad22..666e46457 100644 --- a/tdesign-component/example/assets/api/indexes_api.md +++ b/tdesign-component/example/assets/api/indexes_api.md @@ -43,6 +43,7 @@ | builderAnchor | Widget? Function(BuildContext context, String index, bool isPinnedToTop)? | - | 锚点自定义构建 | | builderContent | Widget? Function(BuildContext context, String index) | - | 内容自定义构建 | | builderIndex | Widget Function(BuildContext context, String index, bool isActive)? | - | 索引文本自定义构建,包括索引激活左侧提示 | +| builderSliverContent | Widget? Function(BuildContext context, String index)? | - | 内容自定义Sliver构建,用于大数据量场景实现懒加载,性能优于builderContent。 | | capsuleTheme | bool? | false | 锚点是否为胶囊式样式 | | indexList | List? | - | 索引字符列表。不传默认 A-Z | | indexListMaxHeight | double? | 0.8 | 索引列表最大高度(父容器高度的百分比,默认 0.8) | diff --git a/tdesign-component/lib/src/components/indexes/t_indexes.dart b/tdesign-component/lib/src/components/indexes/t_indexes.dart index 26566a112..d66c6804e 100644 --- a/tdesign-component/lib/src/components/indexes/t_indexes.dart +++ b/tdesign-component/lib/src/components/indexes/t_indexes.dart @@ -23,6 +23,7 @@ class TIndexes extends StatefulWidget { this.onChange, this.onSelect, required this.builderContent, + this.builderSliverContent, this.builderAnchor, this.builderIndex, }) : super(key: key); @@ -57,6 +58,11 @@ class TIndexes extends StatefulWidget { /// 内容自定义构建 final Widget? Function(BuildContext context, String index) builderContent; + /// 内容自定义Sliver构建,用于大数据量场景实现懒加载,性能优于builderContent。 + /// 返回Sliver类型Widget(如SliverList.builder),优先级高于builderContent。 + final Widget? Function(BuildContext context, String index)? + builderSliverContent; + /// 锚点自定义构建 final Widget? Function( BuildContext context, String index, bool isPinnedToTop)? builderAnchor; @@ -144,6 +150,32 @@ class _TIndexesState extends State { _contentKeys.clear(); return _indexList.map((e) { final isPinnedOffset = capsuleTheme && _activeIndex.value == e; + + Widget contentSliver; + if (widget.builderSliverContent != null) { + contentSliver = Builder( + builder: (context) { + _contentKeys[e] = context; + return widget.builderSliverContent!(context, e) ?? + const SliverToBoxAdapter(child: SizedBox.shrink()); + }, + ); + } else { + contentSliver = SliverToBoxAdapter( + child: Builder( + builder: (context) { + _contentKeys[e] = context; + return Padding( + padding: isPinnedOffset + ? EdgeInsets.only(top: TTheme.of(context).spacer8) + : EdgeInsets.zero, + child: widget.builderContent(context, e), + ); + }, + ), + ); + } + return SliverStickyHeader.builder( sticky: widget.sticky ?? true, pinnedOffset: isPinnedOffset @@ -165,19 +197,7 @@ class _TIndexesState extends State { sticky: widget.sticky ?? true, ); }, - sliver: SliverToBoxAdapter( - child: Builder( - builder: (context) { - _contentKeys[e] = context; - return Padding( - padding: isPinnedOffset - ? EdgeInsets.only(top: TTheme.of(context).spacer8) - : EdgeInsets.zero, - child: widget.builderContent(context, e), - ); - }, - ), - ), + sliver: contentSliver, ); }).toList(); } diff --git a/tdesign-site/src/indexes/README.md b/tdesign-site/src/indexes/README.md index 1d3fb2fb0..7884f348b 100644 --- a/tdesign-site/src/indexes/README.md +++ b/tdesign-site/src/indexes/README.md @@ -249,6 +249,7 @@ Widget _buildOther(BuildContext context) { | builderAnchor | Widget? Function(BuildContext context, String index, bool isPinnedToTop)? | - | 锚点自定义构建 | | builderContent | Widget? Function(BuildContext context, String index) | - | 内容自定义构建 | | builderIndex | Widget Function(BuildContext context, String index, bool isActive)? | - | 索引文本自定义构建,包括索引激活左侧提示 | +| builderSliverContent | Widget? Function(BuildContext context, String index)? | - | 内容自定义Sliver构建,用于大数据量场景实现懒加载,性能优于builderContent。 | | capsuleTheme | bool? | false | 锚点是否为胶囊式样式 | | indexList | List? | - | 索引字符列表。不传默认 A-Z | | indexListMaxHeight | double? | 0.8 | 索引列表最大高度(父容器高度的百分比,默认 0.8) |