Flutter滑动交互插件xayn_swipe_it的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter滑动交互插件xayn_swipe_it的使用

<xayn_swipe_it>

安装 🛠

在你的项目pubspec.yaml文件中添加以下依赖：

dependencies:
  xayn_swipe_it: latest_version

然后运行以下命令来获取该包：

$ flutter pub get

如何使用 🏗

使用案例#1（基本用法）

首先定义你自己的选项：

enum Option {like, dislike, share, skip, neutral}

然后使用Swipe组件：

Swipe<Option>(
  onOptionTap: (option) => print(option.toString()), // 当选项被点击时触发
  optionsLeft: const [Option.like, Option.share], // 左侧选项
  optionsRight: const [Option.dislike, Option.skip], // 右侧选项
  optionBuilder: (context, option, index, isSelected) => 
    SwipeOptionContainer(
        option: option,
        color: isSelected ? Colors.red : Colors.white, // 选中时的颜色
        child: Center(
          child: Text(option.toString()), // 显示选项文本
        ),
      ),
  child: Container(
      child: Text('Swipe me!'), // 被滑动的内容
    ),
);

使用案例#2（控制Swipe组件）

在状态中添加控制器：

late SwipeController<Option> _swipeController;

在initState方法中初始化控制器：

@override
void initState() {
  super.initState();
  _swipeController = SwipeController<Option>();
}

将控制器传递给Swipe组件：

Swipe<Option>(
  controller: _swipeController,
  ...
);

现在你可以：

  1. 检查Swipe是否打开且选项可见
    final bool isCardOpened = _swipeController.isOpened;
  2. 检查某个选项是否被选择
    final bool isOptionLiked = _swipeController.isSelected(Option.like);
  3. 手动选择一个选项
    _swipeController.updateSelection(option: Option.like, isSelected: true);
  4. 手动滑动卡片以使一个选项可见
    await _swipeController.swipeOpen(Option.like);

使用案例#3（通过滑动手势选择选项）

你可以在Swipe组件中传递一个条件来选择选项：

Swipe<Option>(
  // 这里我们通过滑动手势选择左侧的第一个选项或右侧的第一个选项
  onFling: (options) => options.first,
  ...
);

使用案例#4（禁用选项）

你可以禁用选项的点击事件：

Swipe<Option>( 
  optionBuilder: (context, option, index, isSelected) => 
    SwipeOptionContainer(
        // 禁用已选中的选项
        isDisabled: isSelected,
        ...
        ),
      ),
  ...
);

使用案例#5（传递新选项到optionBuilder）

你可以使用optionBuilder来处理未传递到optionsLeft或optionsRight的选项：

Swipe<Option>( 
  optionsLeft: const [Option.like, Option.share],
  optionsRight: const [Option.dislike, Option.skip],
  optionBuilder: (context, option, index, isSelected) => 
    SwipeOptionContainer(
        option: Option.neutral,
        ...
      ),
  // 点击选项会触发`onOptionTap`并传递`Option.neutral`
  onOptionTap: (option) => print(option.toString()),
  ...
);

使用案例#6（改变选项）

在状态变量中添加监听器：

SwipeController<Option> _swipeController  = SwipeController<Option>();
bool isLiked = false;

// 添加监听器以响应SwipeController的变化
_swipeController.addListener(() {
    setState(() {
      isLiked = _swipeController.isSelected(Option.like);
    });
});

传递控制器给Swipe组件：

Swipe<Option>(
  controller: _swipeController,

  // 如果`isLiked`为true，则显示不同的选项列表
  optionsLeft: isLiked ? [Option.neutral, Option.share] : [Option.like, Option.share],
  ...
);

更多关于Flutter滑动交互插件xayn_swipe_it的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter滑动交互插件xayn_swipe_it的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用xayn_swipe_it插件来实现滑动交互的一个简单示例。这个插件允许你轻松地在列表项中实现左右滑动操作，比如删除或标记为已读等功能。

首先，确保你已经在pubspec.yaml文件中添加了xayn_swipe_it依赖：

dependencies:
  flutter:
    sdk: flutter
  xayn_swipe_it: ^最新版本号  # 请替换为当前最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Dart文件中，你可以这样使用xayn_swipe_it插件：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(20, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe to Interact'),
      ),
      body: SwipeTo(
        onSwipeLeft: (index) {
          setState(() {
            items.removeAt(index);
          });
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text("Item ${index} removed")),
          );
        },
        onSwipeRight: (index) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text("Item ${index} marked as read")),
          );
          // 在这里添加标记为已读的逻辑
        },
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
              trailing: Icon(Icons.more_vert),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入依赖：首先导入了flutter/material.dart和xayn_swipe_it/xayn_swipe_it.dart。
  2. 定义数据：在_MyHomePageState类中定义了一个包含20个字符串的列表items。
  3. 构建UI：在build方法中，使用Scaffold和AppBar来构建基本的页面结构。
  4. 使用SwipeTo组件：SwipeTo组件包裹了一个ListView.builder，用于生成列表项。
  5. 处理滑动事件：通过onSwipeLeft和onSwipeRight回调来处理左滑和右滑事件。左滑时从列表中移除项目并显示一个SnackBar，右滑时仅显示一个SnackBar（你可以根据需要添加标记为已读的逻辑）。

这个示例展示了如何使用xayn_swipe_it插件实现基本的滑动交互功能。你可以根据需求进一步自定义和扩展这个示例。

回到顶部