update: example

Author: LinXunFeng

example/lib/features/scene/detail/logic/detail_logic_list_view.dart

@@ -99,12 +99,12 @@ extension DetailLogicForListView on DetailLogic {
     update(ids);
   }
 
-  /// Show loading first, and hide loading after the ListView is rendered.
-  void firstTimeRenderListView() {
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      state.showLoading = false;
-      update([DetailUpdateType.loading]);
-    });
+  /// Show loading first, and hide loading after setting the index of the
+  /// TabBar and scrolling to the corresponding module.
+  void firstTimeRenderListView() async {
+    await Future.delayed(const Duration(milliseconds: 100));
+    state.showLoading = false;
+    update([DetailUpdateType.loading]);
   }
 
   void loadAsyncDataForListView() {

example/lib/features/scene/detail/state/detail_state_list_view.dart

@@ -17,7 +17,11 @@ mixin DetailStateForListView {
 
   late ListObserverController observerController = ListObserverController(
     controller: scrollController,
-  )..cacheJumpIndexOffset = false;
+  )
+    ..observeIntervalForScrolling = const Duration(milliseconds: 50)
+    // Since there are modules loaded asynchronously, which will cause the
+    // cache to be offset inaccurately, so it is set to false here
+    ..cacheJumpIndexOffset = false;
 
   late ChatScrollObserver keepPositionObserver = ChatScrollObserver(
     observerController,

example/lib/features/scene/detail/widget/detail_list_item_wrapper.dart

@@ -8,13 +8,13 @@ import 'package:flutter/material.dart';
 import 'package:scrollview_observer_example/features/scene/detail/header/detail_header.dart';
 
 class DetailListItemWrapper extends StatefulWidget {
-  final String title;
+  final String? title;
   final Widget child;
 
   const DetailListItemWrapper({
     super.key,
-    required this.title,
     required this.child,
+    this.title,
   });
 
   @override
@@ -23,20 +23,25 @@ class DetailListItemWrapper extends StatefulWidget {
 
 class _DetailListItemWrapperState extends State<DetailListItemWrapper>
     with DetailLogicConsumerMixin<DetailListItemWrapper> {
+  String get title => widget.title ?? '';
+
   @override
   Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         _buildTitle(),
         widget.child,
+        const SizedBox(height: 10),
       ],
     );
   }
 
   Widget _buildTitle() {
+    if (title.isEmpty) return const SizedBox.shrink();
+
     Widget resultWidget = Text(
-      widget.title,
+      title,
       style: Theme.of(context).textTheme.titleLarge,
     );
     resultWidget = Padding(

example/lib/features/scene/detail/widget/detail_list_view.dart

@@ -90,11 +90,14 @@ class _DetailListViewState extends State<DetailListView>
         }
       },
       separatorBuilder: (context, index) {
-        return const Divider();
+        return Container(
+          color: Colors.black12,
+          height: 1,
+        );
       },
       itemCount: moduleTypes.length,
       // Set a large enough cacheExtent to ensure that the keep position
-      // function can work properly.
+      // functionality can work properly.
       //
       // More information and tips:
       // https://github.com/fluttercandies/flutter_scrollview_observer/wiki/3%E3%80%81Chat-Observer

example/lib/features/scene/detail/widget/list_item/detail_list_module1.dart

@@ -6,6 +6,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:scrollview_observer_example/features/scene/detail/header/detail_header.dart';
+import 'package:scrollview_observer_example/features/scene/detail/widget/detail_list_item_wrapper.dart';
 
 class DetailListModule1 extends StatefulWidget {
   const DetailListModule1({super.key});
@@ -19,6 +20,9 @@ class _DetailListModule1State extends State<DetailListModule1>
   @override
   Widget build(BuildContext context) {
     Widget resultWidget = _buildPageView();
+    resultWidget = DetailListItemWrapper(
+      child: resultWidget,
+    );
     return resultWidget;
   }