Flutter轮播按钮插件buttons_swiper的使用

Flutter轮播按钮插件buttons_swiper的使用

Installation（安装）

  1. 在pubspec.yaml文件中添加该包的最新版本，并运行flutter pub get：
dependencies:
  buttons_swiper: ^0.1.0
  1. 导入包并在Flutter应用中使用：
import 'package:buttons_swiper/buttons_swiper.dart';

Example（示例）

以下是buttons_swiper的一些可修改属性示例：

  • alignement
  • height
  • circleBorderWidth
  • circleBorderColor
  • onTap
  • firstIconsList
  • secondIconsList
  • loop
  • fade
  • startIndex
  • viewportFraction
  • scale

完整示例代码

class SwiperTest extends StatelessWidget {
  const SwiperTest({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: Container(
        child: swiper(
          onTap: (index) {
            // 点击时打印当前索引
            print(index);
          },
          onSwip: (index) {
            // 滑动时打印当前索引
            print(index);
          },
          pages: [
            // 轮播页面列表
            Container(color: Colors.blueAccent,),
            Container(color: Colors.redAccent,),
            Container(color: Colors.yellow,),
          ],
          height: 100, // 轮播的高度
          alignement: Alignment.bottomCenter, // 对齐方式
          circleBorderColor: Colors.white, // 圆形按钮边框颜色
          secondIconsList: [
            // 第二层图标列表
            Text(
              "BUY",
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.w900,
              ),
              textScaleFactor: 2.0,
            ),
            Text(
              "SETUP",
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.w900,
              ),
              textScaleFactor: 1.7,
            ),
            Text(
              "CALL",
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.w900,
              ),
              textScaleFactor: 2.0,
            ),
          ],
          firstIconsList: [
            // 第一层图标列表
            Icon(
              Icons.monetization_on,
              color: Colors.white,
              size: 50,
            ),
            Icon(
              Icons.settings,
              color: Colors.white,
              size: 50,
            ),
            Icon(
              Icons.phone_enabled,
              color: Colors.white,
              size: 50,
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


buttons_swiper 是一个用于 Flutter 的轮播按钮插件，它允许你在应用中创建带有按钮的轮播组件。通过这个插件，你可以轻松地在轮播图中添加导航按钮，例如“上一页”和“下一页”按钮，以增强用户体验。

安装

首先，你需要在 pubspec.yaml 文件中添加 buttons_swiper 依赖：

dependencies:
  flutter:
    sdk: flutter
  buttons_swiper: ^1.0.0  # 请检查最新版本

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

使用示例

以下是一个简单的示例，展示了如何使用 buttons_swiper 插件来创建一个带有导航按钮的轮播图：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Buttons Swiper Example'),
        ),
        body: SwiperWithButtons(),
      ),
    );
  }
}

class SwiperWithButtons extends StatelessWidget {
  final List<String> images = [
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/150',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ButtonsSwiper(
        children: images.map((url) {
          return Image.network(url);
        }).toList(),
        prevButton: Icon(Icons.arrow_back),
        nextButton: Icon(Icons.arrow_forward),
        buttonColor: Colors.blue,
        buttonSize: 40.0,
        buttonPadding: EdgeInsets.all(10.0),
        autoplay: true,
        autoplayDuration: Duration(seconds: 3),
        loop: true,
        onIndexChanged: (index) {
          print('Current index: $index');
        },
      ),
    );
  }
}
回到顶部