Flutter-无限循环滚动标签

简介: Flutter-无限循环滚动标签

1. 序章

在现代移动应用开发中,滑动视图是常见的交互模式之一。特别是当你需要展示大量内容时,使用自动滚动的滑动视图可以显著提升用户体验。在这篇文章中,我们将讨论如何使用 Flutter 实现一个自动滚动的列表视图。

2. 效果

3. 实现思路

为了实现一个自动滚动的列表视图,我们需要考虑以下几点:

  1. ScrollController 管理:每个横向列表需要一个 ScrollController 来管理其滚动状态。
  2. 自动滚动机制:使用 Timer 定时器定期触发滚动事件。
  3. 用户交互管理:通过手势检测来判断用户何时开始或结束手动滚动,并暂停或恢复自动滚动。

4. 实现代码

以下是实现这个功能的完整代码:

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

//https://github.com/yixiaolunhui/flutter_xy
class LoopScrollWidget extends StatefulWidget {
  final List<List<dynamic>> items;
  final double? rowHeight;
  final Widget Function(BuildContext context, int rowIndex, int index) itemBuilder;

  const LoopScrollWidget({
    Key? key,
    this.rowHeight = 50,
    required this.items,
    required this.itemBuilder,
  }) : super(key: key);

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

class LoopScrollWidgetState extends State<LoopScrollWidget> {
  late final List<ScrollController> _scrollControllers;
  late final List<bool> _isScrollingList;
  final double _scrollIncrement = 4.0;
  final Duration _scrollDuration = const Duration(milliseconds: 50);
  Timer? _scrollTimer;

  @override
  void initState() {
    super.initState();
    _scrollControllers = List.generate(widget.items.length, (index) => ScrollController());
    _isScrollingList = List.generate(widget.items.length, (index) => false);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _startAutoScroll();
    });
  }

  @override
  void dispose() {
    _scrollTimer?.cancel();
    for (var controller in _scrollControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(widget.items.length, (rowIndex) {
        return GestureDetector(
          onPanDown: (_) => _isScrollingList[rowIndex] = true,
          onPanEnd: (_) => _isScrollingList[rowIndex] = false,
          onTapUp: (_) => _isScrollingList[rowIndex] = false,
          child: NotificationListener<ScrollNotification>(
            onNotification: (notification) {
              if (notification is ScrollEndNotification) {
                _isScrollingList[rowIndex] = false;
              }
              return false;
            },
            child: SizedBox(
              height: widget.rowHeight,
              child: ListView.builder(
                controller: _scrollControllers[rowIndex],
                physics: const BouncingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  final position = index % widget.items[rowIndex].length;
                  return Row(
                    children: [widget.itemBuilder(context, rowIndex, position)],
                  );
                },
              ),
            ),
          ),
        );
      }),
    );
  }

  void _startAutoScroll() {
    _scrollTimer?.cancel();
    _scrollTimer = Timer.periodic(_scrollDuration, (timer) {
      for (var i = 0; i < _scrollControllers.length; i++) {
        if (!_isScrollingList[i] && _scrollControllers[i].hasClients) {
          _scrollControllers[i].animateTo(
            _scrollControllers[i].offset + _scrollIncrement,
            duration: _scrollDuration,
            curve: Curves.linear,
          );
        }
      }
    });
  }
}

详细解释

  1. Stateful WidgetLoopScrollWidget 继承自 StatefulWidget,其状态管理由 LoopScrollWidgetState 类负责。
  2. 初始化:在 initState 方法中,我们初始化了每个行的 ScrollController 和一个布尔列表 _isScrollingList 来跟踪哪些行正在被手动滚动。
  3. 自动滚动:使用 Timer.periodic 来定时滚动每一行,除非该行当前正在被手动滚动。
  4. 手势检测:使用 GestureDetector 来检测用户何时开始或结束手动滚动,并通过 NotificationListener 来监听滚动结束通知。

详情:github.com/yixiaolunhui/flutter_xy

相关文章
|
6月前
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
279 0
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
134 0
|
13天前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
74 1
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
110 0
|
4月前
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
|
6月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
102 1
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
6月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
203 0
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
6月前
|
前端开发 数据处理
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
【4月更文挑战第30天】本文探讨了 Flutter 中的滚动性能优化和无限列表实现。关键点包括:1) 滚动性能直接影响用户满意度,优化可提升响应速度;2) 影响因素有布局复杂度、频繁重绘和数据处理;3) 优化措施包括懒加载、简化布局、减少不必要的重绘和高效处理数据;4) 无限列表通过监听滚动位置,动态加载新数据;5) 实现时注意加载策略、数据处理效率和内存管理。案例分析和总结强调了优化在实际开发中的重要性。
121 0
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
|
6月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
79 0
|
6月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
120 0