Flutter无限滚动轮播插件infinite_marquee的使用

Flutter无限滚动轮播插件infinite_marquee的使用

无限滚动跑马灯

特性

  • 自定义跑马灯
  • 支持：自动滚动、无限循环、自定义跑马的内容。
  • 支持：手势拖拽、点击。

image

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('无限滚动跑马灯'),
    ),
    body: Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 20),
          height: 70,
          child: InfiniteMarquee(
            stepOffset: 1,
            itemBuilder: (BuildContext context, int index) {
              /// 自定义控件
              return GestureDetector(
                onTap: () {
                  print('点击了$index');
                },
                child: Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.only(right: 10),
                  // padding: EdgeInsets.only(right: 10),
                  width: 90,
                  height: 70,
                  decoration: BoxDecoration(
                    color: index % 2 == 0 ? Colors.red : Colors.blue,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Text('自定义$index'),
                ),
              );
            },
          ),
        ),
      ],
    ),
  );
}

完整示例代码

import 'package:example/home_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

更多关于Flutter无限滚动轮播插件infinite_marquee的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter无限滚动轮播插件infinite_marquee的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用infinite_marquee插件来实现无限滚动轮播的一个示例代码。infinite_marquee是一个流行的Flutter插件，用于创建无限循环的滚动视图。

首先，确保你的Flutter项目已经包含了infinite_marquee依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  infinite_marquee: ^latest_version  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用InfiniteMarquee组件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Infinite Marquee Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: InfiniteMarqueeExample(),
    );
  }
}

class InfiniteMarqueeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Infinite Marquee Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: InfiniteMarquee(
          width: double.infinity,
          height: 200,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 10, // 假设我们有10个项目
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: Colors.grey[300],
                  ),
                  width: 150,
                  height: 200,
                  child: Center(
                    child: Text(
                      'Item $index',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
              );
            },
          ),
          scrollAxis: Axis.horizontal,
          crossAxisCount: 1,
          autoplay: true,
          autoPlayInterval: Duration(seconds: 3), // 每3秒自动滚动一次
          scrollPauseOnHover: true,
          showArrow: true,
          hoverPause: true,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了必要的包。
  2. 创建了一个MyApp类作为应用的入口。
  3. 在InfiniteMarqueeExample类中，我们构建了一个Scaffold，其中包含一个AppBar和一个Padding，Padding中包含了一个InfiniteMarquee组件。
  4. InfiniteMarquee组件的child是一个ListView.builder，用于动态生成水平滚动的内容。在这个例子中，我们生成了10个项目。
  5. InfiniteMarquee组件的其他属性，如width、height、scrollAxis、autoplay等，用于配置轮播的行为和样式。

这个示例展示了如何使用infinite_marquee插件创建一个简单的无限滚动轮播视图。你可以根据需求进一步自定义和扩展这个示例。

回到顶部