Flutter轮播图展示插件easy_slider的使用

开始使用

easy_slider 插件提供了一个简单的滑动行为基础组件。通过该组件，你可以轻松实现滑动效果，并且可以根据滑动百分比触发不同的动画。

示例代码

以下是最简单的使用 DragPercentageProvider 的方式。这个组件在包中非常重要，因为其他组件依赖它来实现不同的行为。默认情况下，如果你不设置初始值给 DragPercentageProvider，它的初始值将被设为零。ValueNotifier 将通知你当前的百分比。

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

class SliderWithText extends StatefulWidget {
  const SliderWithText({Key? key}) : super(key: key);

  [@override](/user/override)
  _SliderWithTextState createState() => _SliderWithTextState();
}

class _SliderWithTextState extends State<SliderWithText> {
  final ValueNotifier<double> n = ValueNotifier<double>(0.0);

  [@override](/user/override)
  void initState() {
    super.initState();
    n.addListener(() {
      setState(() {});
    });
  }

  [@override](/user/override)
  void dispose() {
    n.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DragPercentageProvider(
      valListener: n,
      child: SizedBox(
        height: 50,
        width: 200,
        child: ColoredBox(
          color: Colors.lightBlueAccent,
          child: Text("触摸并移动 \n 当前值:${n.value}"),
        ),
      ),
    );
  }
}

使用方法

easy_slider 包提供了最简单的方式来使用 DragPercentage。此外，基于这个组件，包还提供了一个名为 DragWithAnimationController 的组件，当滑动百分比达到控制器的触发值时，可以播放动画。

示例代码

以下是几个示例代码：

1. animated_icon
2. custom_paint
3. reverse_custom_paint
4. vertical_custom_paint

特性

• 支持反向行为。
• 支持水平和垂直拖动。

完整示例

以下是一个完整的示例代码，展示了如何在一个应用中集成多个滑动组件。

import 'package:flutter/material.dart';
import 'dart:core';
import 'reverse_custompaint_demo.dart';
import 'custompaint_demo.dart';
import 'vertical_custompaint_demo.dart';
import 'animatedicon_demo.dart';
import 'slider_base.dart';

void main(List<String> args) {
  runApp(Demo());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("SliderDemo"),
        ),
        body: Column(
          children: [
            ColorBoxSlider(),
            ReverseColorBoxSlider(),
            VerticalColorBoxSlider(),
            AnimationIconSlider(),
            SliderWithText()
          ],
        ),
      ),
    );
  }
}