flutter 如何监听scroll状态,scroll是否可用

nr9pn0ug  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(152)

我有一个简单的listView.bulder小部件,它有ScrollController()
当然,如果没有足够的项目,所以滚动不可用,如果有足够的项目是不可见的屏幕上,所以滚动可用,所以我怎么能听这种状态。

ScrollController ScrollController = ScrollController();

  chatScrollController.addListener(() {
     
  });
iaqfqrcu

iaqfqrcu1#

我现在能生产的东西:

1.第一次滚动时,当滚动可用时,堆栈上的小部件将出现。
1.您可以尝试删除项目,直到它不超过屏幕高度为止。(堆栈上的小部件不会出现)
1.您可以尝试添加项目,直到它超过屏幕的高度。(堆栈上的小部件将再次出现)

示例代码:
class MyListView2 extends StatefulWidget {
  @override
  _MyListView2State createState() => _MyListView2State();
}

class _MyListView2State extends State<MyListView2> {

  final ScrollController _scrollController = ScrollController();

  final GlobalKey _key = GlobalKey();

  final List<String> items = List.generate(30, (index) => 'Item $index');

  late double maxHeightOfListView = 0;

  late double currentHeightOfListView = 0;

  late RenderBox renderBox;

  bool _isExceeded = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        _isExceeded = _scrollController.hasClients && _scrollController.position.maxScrollExtent > 0;
      });
    });

    WidgetsBinding.instance.addPostFrameCallback((_) {
      renderBox = _key.currentContext!.findRenderObject() as RenderBox;
      maxHeightOfListView = currentHeightOfListView = renderBox.size.height;
      setState(() {});
    });
  
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          key: _key,
          shrinkWrap: true,
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
              trailing: IconButton(
                  onPressed: () {
                    items.removeAt(index);
                    setState(() {
                      currentHeightOfListView = renderBox.size.height;
                      if (currentHeightOfListView < maxHeightOfListView) {
                        _isExceeded = false;
                      }
                    });
                  },
                  icon: Icon(Icons.remove)
                ),
            );
          },
        ),
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Visibility(
            visible: _isExceeded,
            child: Container(
              padding: const EdgeInsets.all(10),
              color: Colors.green,
              child: Text('My Stack Widget')
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          child: IconButton(
            onPressed: () {
              setState(() {
                items.add('New');    
                currentHeightOfListView = renderBox.size.height;
                if (currentHeightOfListView >= maxHeightOfListView) {
                  _isExceeded = true;
                }            
              });
            },
            icon: Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}

相关问题