Flutter自定义滑块插件stun_slider的使用

Flutter 自定义滑块插件 stun_slider 的使用

StunSlider 小部件会自动调整其高度以匹配当前显示的页面。

它支持与经典 PageView 相同的参数。

该包包括用于控制滑块和显示分页的辅助小部件。

水平和垂直方向

水平	垂直

本地化

有关俄语文档，可以查看 此处。

开始使用

在 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  stun_slider: <latest-version>

然后运行命令：

flutter pub get

导入库：

import 'package:stun_slider/stun_slider.dart';

使用示例

固定 StunSlider

要创建一个固定的 StunSlider，将一组小部件传递给 children 参数：

StunSlider(
  children: [
    Container(
      height: 200,
      width: 200,
      color: Colors.green,
    ),
    Container(
      height: 200,
      width: 200,
      color: Colors.green,
    ),
    Container(
      height: 200,
      width: 200,
      color: Colors.green,
    ),
  ],
)

动态构建 StunSlider

如果你有很多页面，并且希望在滚动时动态创建它们，使用 .builder 构造函数，传递 itemCount 和 itemBuilder 参数：

StunSlider.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Container(
      height: 200,
      width: 200,
      color: Colors.green,
    );
  },
)

控制器管理滑块

StunSliderController 提供了切换滑块页面的方法：

final _controller = StunSliderController();

如果你想要定义自己的 PageController，你需要在构造函数中传递其实例：

final pageController = PageController();
final _controller = StunSliderController(pageController);

使用示例：

_controller.previousPage(); // 切换到上一页
_controller.nextPage(); // 切换到下一页
_controller.jumpToIndex(1); // 跳转到指定索引的页面

额外组件

额外的 UI 组件允许你为滑块创建自定义控制元素。为了与滑块同步，你需要将所有组件与一个公共控制器结合在一起。

导航按钮

后退

StunSliderNavButton.prev(
  itemCount: _items.length,
  controller: _controller,
  child: const Icon(Icons.arrow_back), // 使用你自己的小部件
)

前进

StunSliderNavButton.next(
  itemCount: 3,
  controller: _controller,
  child: const Icon(Icons.arrow_forward), // 使用你自己的小部件
)

分页元素

StunSliderPagination 允许你创建一个自定义的分页元素。

StunSliderPagination(
  controller: _controller,
  itemCount: 3,
  itemBuilder: (context, index, isActive) {
    return Container(
      height: 40,
      width: 40,
      color: isActive ? Colors.amber : Colors.grey,
      child: Center(child: Text('$index')),
    );
  },
),

示例

完整的使用示例可在 example/ 目录中查看。

示例代码

import 'package:example/horizontal_example.dart';
import 'package:example/vertical_example.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stun Slider Demo App'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPage,
        onTap: (value) => setState(() => _currentPage = value),
        items: const [
          BottomNavigationBarItem(
            icon: SizedBox.shrink(),
            label: '水平',
          ),
          BottomNavigationBarItem(
            icon: SizedBox.shrink(),
            label: '垂直',
          ),
        ],
      ),
      body: Card(
        margin: const EdgeInsets.all(24),
        elevation: 10,
        child: [
          const HorizontalExample(),
          const VerticalExample(),
        ][_currentPage],
      ),
    );
  }
}