[How to use] reverse的listview中item可以展开折叠，即item的高度发生了变化，如何利用standby()保持列表位置呢？

[sweatfryash]

Platforms

Android, iOS

Description

作者你好，我的问题如标题，简单的demo我贴在了下方，如果表达不清晰的话我再补充

My code

import 'package:flutter/material.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final scrollController = ScrollController();

  late final observerController = ListObserverController(controller: scrollController)
    ..cacheJumpIndexOffset = false;

  // 实例化 ChatScrollObserver
  late final chatObserver = ChatScrollObserver(observerController)
    // 滚动视图的偏移量超过 5 时才会启用保持IM消息位置的功能
    ..fixedPositionOffset = 5
    // 内部在切换 isShrinkWrap 的值时会触发该回调，
    // 触发时局部刷新列表视图即可，这里因为是 Demo 的缘故，做法比较简单粗暴
    ..toRebuildScrollViewCallback = () {
      setState(() {});
    };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListViewObserver(
        child: ListView.builder(
          controller: scrollController,
          physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
          itemCount: 20,
          reverse: true,
          itemBuilder: (context, index) {
            return ListItem(
              index: index,
              onExpand: () {
                chatObserver.standby();
              },
            );
          },
        ),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  const ListItem({super.key, required this.index, required this.onExpand});

  final int index;
  final VoidCallback onExpand;

  @override
  State<ListItem> createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  bool isExpand = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(border: Border.all()),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('${widget.index}'),
          if (isExpand)
            Container(
              color: Colors.grey,
              height: 100,
              child: const Center(
                child: Text('展开内容'),
              ),
            ),
          TextButton(
            onPressed: () {
              widget.onExpand();
              setState(() {
                isExpand = !isExpand;
              });
            },
            child: Text(isExpand ? '收起' : '展开'),
          ),
        ],
      ),
    );
  }
}

Try do it

No response

[LinXunFeng]

做如下调整

body: ListViewObserver(
+  controller: observerController,
  child: ListView.builder(
    controller: scrollController,
    physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
    itemCount: 20,
    reverse: true,
    itemBuilder: (context, index) {
      return ListItem(
        index: index,
        onExpand: () {
-          chatObserver.standby();
+          final refItemIndex = index + 1;
+          chatObserver.standby(
+            mode: ChatScrollObserverHandleMode.specified,
+            refIndexType: ChatScrollObserverRefIndexType.itemIndex,
+            refItemIndex: refItemIndex,
+            refItemIndexAfterUpdate: refItemIndex,
          );
        },
      );
    },
  ),
),

TextButton(
  onPressed: () {
-    widget.onExpand();
+    if (!isExpand) {
+      widget.onExpand();
+    }
    setState(() {
      isExpand = !isExpand;
    });
  },
  child: Text(isExpand ? '收起' : '展开'),
),

关于 standby 各参数的详细说明，可点开链接查看：3.4、指定参照的消息

[sweatfryash]

感谢大佬帮忙，目前几乎满足了item展开时向下展开的需求，但是还存在两个边界情况，不知道在不在本插件的应用范围内。大佬有空闲的话帮忙看看就行。

1.列表中的最后一个元素，即index=19的元素， final refItemIndex = index + 1;这句对它不适用了，所以会表现为向上展开。

default.mp4

2.我希望展开和收起的时候元素都能保持位置，所以两种情况都会调用 widget.onExpand()，但是当列表已经滚动到底或者说maxOffset的时候，收起的动作会影响到位置。

142_1732008663.mp4

3.补充：展开的item越高，item越靠近顶部，越容易出现不能保持位置的情况,不仅限于最后一条item。

以下是目前的demo（只会贴全部代码）

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final scrollController = ScrollController();

  late final observerController = ListObserverController(controller: scrollController)
    ..cacheJumpIndexOffset = false;

  late final chatObserver = ChatScrollObserver(observerController)
    ..fixedPositionOffset = -1
    ..toRebuildScrollViewCallback = () {
     // setState(() {});
    };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListViewObserver(
        controller: observerController,
        child: ListView.builder(
          controller: scrollController,
          physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
          itemCount: 20,
          reverse: true,
          itemBuilder: (context, index) {
            return ListItem(
              index: index,
              onExpand: () {
                final refItemIndex = index + 1;
                chatObserver.standby(
                  mode: ChatScrollObserverHandleMode.specified,
                  refIndexType: ChatScrollObserverRefIndexType.itemIndex,
                  refItemIndex: refItemIndex,
                  refItemIndexAfterUpdate: refItemIndex,
                );
              },
            );
          },
        ),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  const ListItem({super.key, required this.index, required this.onExpand});

  final int index;
  final VoidCallback onExpand;

  @override
  State<ListItem> createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  bool isExpand = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(border: Border.all()),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('${widget.index}'),
          if (isExpand)
            Container(
              color: Colors.grey,
              height: 100,
              child: const Center(
                child: Text('展开内容'),
              ),
            ),
          TextButton(
            onPressed: () {
              //if (!isExpand) {
                widget.onExpand();
              //}
              setState(() {
                isExpand = !isExpand;
              });
            },
            child: Text(isExpand ? '收起' : '展开'),
          ),
        ],
      ),
    );
  }
}

[LinXunFeng]

升级至 1.24.0 版本后，按如下代码调整

body: ListViewObserver(
  controller: observerController,
  child: ListView.builder(
    ...
    itemBuilder: (context, index) {
      return ListItem(
        index: index,
        onExpand: (isExpand) {
          // 0 收起时不处理，可以自己看情况调整
          if (!isExpand && index == 0) {
            return;
          }
          // 对比 item 自身
          final refItemIndex = index;
          chatObserver.standby(
            mode: ChatScrollObserverHandleMode.specified,
            refIndexType: ChatScrollObserverRefIndexType.itemIndex,
            refItemIndex: refItemIndex,
            refItemIndexAfterUpdate: refItemIndex,
            customAdjustPositionDelta: (model) {
              // 最后一个 item 收起时，当前的偏移量已经越界，则按默认处理
              if (model.newPosition.outOfRange) {
                return 0;
              }
              // 展开多 100，收起少 100
              // 当前回调下 item 还为完成布局，所以无法得知大小，这里只能自己算差值
              return isExpand ? 100 : -100;
            },
          );
        },
      );
    },
  ),
),

TextButton(
  onPressed: () {
    isExpand = !isExpand;
    widget.onExpand(isExpand);
    setState(() {});
  },
  child: Text(isExpand ? '收起' : '展开'),
),

[sweatfryash]

谢谢大佬