如何在Flutter Web中实现类似示例图的无限滚动Logo网格

核心实现思路 #

• 用AnimationController驱动滚动位置，实现自动滚动效果
• 复制Logo数据源，通过视觉循环模拟无限加载，避免真实无限列表的性能损耗
• 监听动画状态，完成后重置控制器，形成持续循环

完整代码示例 #

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

void main() => runApp(const LogoScrollApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Infinite Logo Scroll',
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 120, // 自定义网格高度
            child: AutoScrollLogoGrid(
              // 替换为你的真实Logo数据源，可直接使用Image组件
              logos: List.generate(20, (index) => 'Logo $index'),
            ),
          ),
        ),
      ),
    );
  }
}

class AutoScrollLogoGrid extends StatefulWidget {
  final List<String> logos;

  const AutoScrollLogoGrid({super.key, required this.logos});

  @override
  State<AutoScrollLogoGrid> createState() => _AutoScrollLogoGridState();
}

class _AutoScrollLogoGridState extends State<AutoScrollLogoGrid> with SingleTickerProviderStateMixin {
  late AnimationController _scrollController;
  late ScrollController _listScrollController;
  Timer? _scrollTimer;

  @override
  void initState() {
    super.initState();
    _listScrollController = ScrollController();
    // 滚动周期，值越小滚动速度越快
    _scrollController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 30),
    )..addListener(() {
        final scrollPosition = _scrollController.value * (_listScrollController.position.maxScrollExtent);
        _listScrollController.jumpTo(scrollPosition);
      });
    _startAutoScroll();
  }

  void _startAutoScroll() {
    _scrollTimer?.cancel();
    _scrollTimer = Timer.periodic(const Duration(milliseconds: 16), (_) {
      if (_scrollController.isCompleted) {
        _scrollController.reset();
      }
      _scrollController.forward();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    // 复制数据源实现无缝循环
    final doubledLogos = [...widget.logos, ...widget.logos];

    return ListView.builder(
      controller: _listScrollController,
      scrollDirection: Axis.horizontal, // 横向滚动，如需纵向改为Axis.vertical
      itemCount: doubledLogos.length,
      itemBuilder: (context, index) {
        return Container(
          width: 100, // 单个Logo宽度
          margin: const EdgeInsets.symmetric(horizontal: 15),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey.shade200),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(
            // 替换为你的Logo组件，比如Image.network('你的图片链接')
            child: Text(doubledLogos[index], style: const TextStyle(fontSize: 14)),
          ),
        );
      },
    );
  }
}

关键调整点 #

• 滚动速度：修改AnimationController的duration参数，数值越小滚动越快
• Logo替换：将示例中的Text组件替换为实际的Image或自定义Logo组件
• 滚动方向：修改scrollDirection为Axis.vertical可实现纵向无限滚动
• 网格尺寸：调整SizedBox的height和单个Logo容器的width适配你的布局需求

内容的提问来源于stack exchange，提问作者Hassan Naveed