flutter仿商品列表一（滚动学习）

最新推荐文章于 2024-12-17 15:43:23 发布

原创

最新推荐文章于 2024-12-17 15:43:23 发布 · 962 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Flutter实现的双侧列表联动滚动效果的案例，通过监听左右两侧ListView的滚动位置，实现同步滚动和触底加载功能。文章详细展示了如何使用ScrollController来控制多个ListView的滚动行为，并提供了完整的代码示例。

import 'package:flutter/material.dart';

class ListPages extends StatefulWidget {
  ListPages({Key key}) : super(key: key);

  @override
  _ListPagesState createState() => _ListPagesState();
}

class _ListPagesState extends State<ListPages> {

  ScrollController _leftScrollController = ScrollController(); // 滚动左边监听
  ScrollController _rightScrollController = ScrollController(); // 滚动右边监听
  ScrollController _fatherScrollController = ScrollController(); // 滚动右边监听
  
  @override
  void initState() {

    _leftScrollController.addListener(() {

      print(_leftScrollController.offset); //打印滚动位置

      if (_leftScrollController.offset == 0.0) { // 拉到顶部
          // _fatherScrollController.jumpTo(0.0);
        _fatherScrollController.animateTo(.0,
                duration: Duration(milliseconds: 200),
                curve: Curves.ease
            );
      }

      if (_leftScrollController.position.pixels == _leftScrollController.position.maxScrollExtent) { // 拉到底部
        print('----left----');
        // _fatherScrollController.jumpTo(_leftScrollController.position.maxScrollExtent);
          _fatherScrollController.animateTo(_l