Flutter 无限滚动组件实现ListView

Flutter 无限滚动组件实现ListView 方法:


dart 复制代码
  Widget _buildSroll() {
    return Container(
      height: 30,
      width: double.infinity,
      child: ScrollConfiguration(
        behavior: ScrollConfiguration.of(context).copyWith(
          scrollbars: false, // 隐藏滚动条
        ),
        child: ListView.builder(
          controller: _scrollController,
          scrollDirection: Axis.vertical,
          physics: NeverScrollableScrollPhysics(), // 禁止用户手动滚动
          itemCount: notifications.length * 100, // 实现无限循环效果
          itemBuilder: (context, index) {
            int realIndex = index % notifications.length;
            return Container(
              height: 30,
              padding: EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Icon(Icons.notifications_active, size: 14, color: Colors.red),
                  SizedBox(width: 8),
                  Text(
                    notifications[realIndex],
                    style: TextStyle(fontSize: 12, color: Colors.black87),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
dart 复制代码
 void _startAutoScroll() {
    _scrollTimer = Timer.periodic(Duration(seconds: 2), (timer) {
      if (_scrollController != null && _scrollController!.hasClients) {
        // 每次滚动一个完整的通知高度 (30px)
        _scrollController!.animateTo(
          _scrollController!.offset + 30,
          duration: Duration(milliseconds: 500),
          curve: Curves.easeInOut,
        );
      }
    });
  }
dart 复制代码
  ScrollController? _scrollController;
  Timer? _scrollTimer;
  final List<String> notifications = [
    "春节特惠:全场酒店8折起",
    "新用户专享:首单立减100元",
    "限时活动:预订即送早餐",
    "会员福利:积分兑换优惠券",
  ];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
   _ scrollController = ScrollController();
    _startAutoScroll();
  }

  @override
  void dispose() {
    _scrollTimer?.cancel();
    _scrollController?.dispose();
    super.dispose();
  }

复制过去即可使用(通过%取模运算实现)

相关推荐
小哥Mark24 分钟前
Flutter开发鸿蒙年味 + 实用实战应用|绿色烟花:电子烟花 + 手持烟花
flutter·华为·harmonyos
一只大侠的侠2 小时前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
一只大侠的侠3 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos
微祎_4 小时前
Flutter for OpenHarmony:构建一个 Flutter 平衡球游戏,深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
ZH15455891315 小时前
Flutter for OpenHarmony Python学习助手实战:面向对象编程实战的实现
python·学习·flutter
renke33646 小时前
Flutter for OpenHarmony:构建一个 Flutter 色彩调和师游戏,RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
王码码20356 小时前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
ujainu8 小时前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_8 小时前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码20358 小时前
Flutter for OpenHarmony 实战之基础组件:第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos