Flutter轮播组件插件flick的使用

Flutter轮播组件插件flick的使用

flick

这是一款专为Flutter设计的高级轮播组件插件，它允许你非常灵活地管理组件的滑动。

该插件与<snap>插件完美兼容，但也可以单独使用。

强烈建议在实际设备上运行示例项目以全面了解其功能。

媒体 | 描述 | 如何使用

注意事项

• 尽管该插件在模拟器上可能会偶尔出现问题，但在实际设备上使用时表现良好。不要因此感到沮丧！

媒体

观看视频：

v0.1.0

描述

这是一款专为Flutter设计的高级轮播组件插件，它允许你非常灵活地管理组件的滑动。

只需将你想要滑动的组件包裹在FlickController中，并填写参数，该插件会处理其余的事情。

如何使用

“视图是被移动的部分。它是可以滑动的组件。边界是约束视图的部分。”

首先，定义一个全局键作为你的视图：

GlobalKey view = GlobalKey();

如果你希望你的视图受到限制，还需要定义一个全局键作为你的边界：

GlobalKey bound = GlobalKey();

然后，创建一个FlickController实例：

FlickController(
  uiChild(),    // uiChild
  false,        // useCache
  view,         // viewKey
  {
    Key key,
    boundKey          : bound,
    constraintsMin    : Offset.zero,
    constraintsMax    : const Offset(1.0, 1.0),
    flexibilityMin    : const Offset(0.75, 0.75),
    flexibilityMax    : const Offset(0.75, 0.75),
    customBoundWidth  : 0,
    customBoundHeight : 0,
    sensitivity       : 0.05,
    onMove            : _onMove,
    onDragStart       : _onDragStart,
    onDragUpdate      : _onDragUpdate,
    onDragEnd         : _onDragEnd,
    onFlick           : _onFlick
  }
)

其中uiChild()函数返回要滑动的组件：

Widget uiChild() {
  return Container(
    key: view,
    width: 200,
    height: 200,
    color: Colors.transparent,
    child: Padding(
      padding: const EdgeInsets.all(5),
      child: Container(
        constraints: BoxConstraints.expand(),
        decoration: const BoxDecoration(
          color: Colors.redAccent,
          borderRadius: const BorderRadius.all(const Radius.circular(10.0)),
        ),
        child: Center(
          child: Text(
            "Flick",
            style: const TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 25,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ),
  );
}

事件回调方法：

void _onMove(Offset offset) {
  // 处理滑动位置变化
}

void _onDragStart(dynamic dragDetails) {
  // 拖动开始时调用
}

void _onDragUpdate(dynamic dragDetails) {
  // 拖动更新时调用
}

void _onDragEnd(dynamic dragDetails) {
  // 拖动结束时调用
}

void _onFlick(Offset offset) {
  // 滑动结束时调用
}

进一步解释：

• 对于所有参数和方法的详细描述，请参阅文档。
• 如果你的uiChild在Peek & Pop过程中不会改变，则将useCache设置为true。
• 如果设置了boundKey，则constraintsMin、constraintsMax、flexibilityMin和flexibilityMax不能为null。
• 关于constraintsMin、constraintsMax、flexibilityMin和flexibilityMax的更多说明，请参阅snap的文档。
• 使用FlickControllerState的shouldFlick(dynamic dragEndDetails, double treshold)方法来确定是否应该触发滑动，其中treshold是视图被认为是滑动的速度阈值。

注意事项

• 我是在几周前开始学习Flutter的，所以这个包可能有一些部分不合理或者可以改进的地方。请告诉我，谢谢！

• 任何帮助、建议或批评都将受到欢迎！

示例代码

以下是完整的示例代码，展示了如何使用flick插件创建一个可滑动的组件：

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// © Cosmos Software | Ali Yigit Bireroglu                                                                                                           /
// All material used in the making of this code, project, program, application, software et cetera (the "Intellectual Property")                     /
// belongs completely and solely to Ali Yigit Bireroglu. This includes but is not limited to the source code, the multimedia and                     /
// other asset files. If you were granted this Intellectual Property for personal use, you are obligated to include this copyright                   /
// text at all times.                                                                                                                                /
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//[@formatter](/user/formatter):off

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

GlobalKey view = GlobalKey();

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flick Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flick Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  Widget box() {
    return Container(
      key: view,
      width: 200,
      height: 200,
      color: Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.all(5),
        child: Container(
          constraints: BoxConstraints.expand(),
          decoration: const BoxDecoration(
            color: Colors.redAccent,
            borderRadius: const BorderRadius.all(const Radius.circular(10.0)),
          ),
          child: Center(
            child: Text(
              "Flick",
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title!)),
      body: FlickController(
        box(),
        true,
        view,
        sensitivity: 0.1,
        onMove: (offset) {
          print("Moving $offset");
        },
        onDragStart: (details) {
          print("Drag start $details");
        },
        onDragUpdate: (details) {
          print("Drag update $details");
        },
        onDragEnd: (details) {
          print("Drag end $details");
        },
        onFlick: (offset) {
          print("Flick $offset");
        },
      ),
    );
  }
}