Flutter滑动组件插件slideable的使用

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

Flutter滑动组件插件 slideable 的使用

Slideable 简介

Slideable 是一个灵活的滑动组件实现，允许您传递简单的 Widget（如图标或其他任何内容）作为操作项，并控制操作项的各种背景。它还提供了一个预定义的回调函数，可以自动关闭列表中已经滑出的项。

主要特性

  • 灵活的操作项：您可以自由选择想要显示的操作项。
  • 自动关闭已滑出的项：通过回调函数自动管理已滑出的项。
  • 最多支持6个操作项：可以根据需要添加多个操作项。
  • 自定义动画曲线和速度：可以控制滑动动画的速度和运动方式。

开始使用

添加依赖

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

dependencies:
  slideable: <latest_version>

引入包

在您的页面或屏幕文件中添加以下导入语句：

import 'package:slideable/Slideable.dart';

基本用法

ActionItems 控制您希望在显示中的操作项。这是一个 List<ActionItems>，每个 ActionItem 包含以下属性：

  • icon: 必填项，可以是任意 Flutter Widget。
  • onPress: 必填项，定义点击该操作项时的行为。
  • backgroundColor: 默认为透明，可以根据需要更改。
  • radius: 可选参数，用于调整设计细节以匹配子部件的圆角半径。

示例代码如下：

ActionItems(
    icon: const Icon(
       Icons.thumb_up,
       color: Colors.blue,
    ),
    onPress: () {},
    backgroundColor: Colors.transparent,
),

Slideable 需要一个 ActionItems 列表和一个 child 组件。其他可选参数包括：

  • backgroundColor: 默认为透明，但可以根据需要更改。
  • resetSlide: 布尔值，通知 Slideable 是否关闭所有已滑出的项。
  • duration: 控制滑动动画的时间。
  • curve: 控制滑动动画的速度或运动方式。

完整示例代码如下：

int resetSlideIndex = 0;

Slideable(
 resetSlide: resetSlide,
 items: <ActionItems>[
    ActionItems(
      icon: const Icon(
         Icons.thumb_up,
         color: Colors.blue,
      ),
      onPress: () {},
      backgroundColor: Colors.transparent,
    ),
 ],
 child: Container(
   padding: const EdgeInsets.symmetric(
      horizontal: 10,
      vertical: 12,
   ),
   decoration: BoxDecoration(
      color: const Color.fromARGB(255, 214, 214, 214),
      border: Border.all(
         width: 1,
         color: const Color.fromARGB(124, 158, 158, 158),
      ),
      borderRadius: BorderRadius.circular(10),
      ),
   child: Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     children: [
       Container(
         height: 50,
         width: 50,
         decoration: BoxDecoration(
            color: Colors.grey[350],
            shape: BoxShape.circle,
            border: Border.all(
               width: 1,
               color: Colors.white,
            ),
         ),
         child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Image.network(
              "https://images.pexels.com/photos/2379429/pexels-photo-2379429.jpeg?auto=compress&cs=tinysrgb&w=1600",
              fit: BoxFit.cover,
            ),
         ),
     ),
       const SizedBox(width: 5),
       Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
               const Text(
                  "Name",
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 12,
                    fontWeight: FontWeight.w800,
                  ),
               ),
               const SizedBox(height: 2),
               const Text(
                  "George Ikwegbu",
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                  ),
               ),
          ]
        ),
       ),
       Text(
         "#1",
         style: const TextStyle(
            fontWeight: FontWeight.w500,
         ),
       ),
     ],
    ),
   ),
  );

示例 Demo

下面是一个完整的示例 Demo，展示了如何使用 Slideable 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Slideable Widget',
      home: Home(),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int resetSlideIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Class List"),
      ),
      body: ListView.separated(
        itemCount: _classList.length,
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        itemBuilder: (context, index) {
          Map<String, dynamic> _student = _classList[index];
          return GestureDetector(
            onLongPressDown: (_) {
              setState(() {
                resetSlideIndex = index;
              });
            },
            child: _listItem(
              context: context,
              student: _student,
              index: index,
              resetSlide: index == resetSlideIndex ? false : true,
            ),
          );
        },
        separatorBuilder: (_, __) => const SizedBox(height: 10),
      ),
    );
  }

  Slideable _listItem({
    required BuildContext context,
    required Map<String, dynamic> student,
    required int index,
    required bool resetSlide,
  }) {
    return Slideable(
      resetSlide: resetSlide,
      items: <ActionItems>[
        ActionItems(
          icon: const Icon(Icons.thumb_up, color: Colors.blue),
          onPress: () => _likeUser(student["name"]),
          backgroundColor: Colors.transparent,
        ),
        ActionItems(
          icon: const Icon(Icons.delete, color: Colors.red),
          onPress: () => _deleteUser(student["name"]),
          backgroundColor: Colors.transparent,
        ),
      ],
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
        decoration: BoxDecoration(
          color: const Color.fromARGB(255, 214, 214, 214),
          border: Border.all(width: 1, color: const Color.fromARGB(124, 158, 158, 158)),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 50,
              width: 50,
              decoration: BoxDecoration(
                color: Colors.grey[350],
                shape: BoxShape.circle,
                border: Border.all(width: 1, color: Colors.white),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.network(
                  student["img"],
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const SizedBox(width: 5),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    "Name",
                    style: TextStyle(color: Colors.grey, fontSize: 12, fontWeight: FontWeight.w800),
                  ),
                  const SizedBox(height: 2),
                  Text(
                    student["name"],
                    style: const TextStyle(fontWeight: FontWeight.w500),
                  ),
                ],
              ),
            ),
            Text(
              "#${index + 1}",
              style: const TextStyle(fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }

  void _deleteUser(String user) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("$user will be deleted."),
        backgroundColor: Colors.grey[450],
      ),
    );
  }

  void _likeUser(String user) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("You gave $user a thumbs up, pretty cool 🥰"),
        backgroundColor: Colors.grey[450],
      ),
    );
  }

  final List<Map<String, dynamic>> _classList = [
    {
      "name": "Ikwegbu George",
      "img": "https://images.pexels.com/photos/2379429/pexels-photo-2379429.jpeg?auto=compress&cs=tinysrgb&w=1600",
    },
    {
      "name": "Phoebe Pelumi",
      "img": "https://images.pexels.com/photos/3986672/pexels-photo-3986672.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
    },
    {
      "name": "James Mike",
      "img": "https://images.pexels.com/photos/11828983/pexels-photo-11828983.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
    },
    {
      "name": "Abigail Ezinne",
      "img": "https://images.pexels.com/photos/3030252/pexels-photo-3030252.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
    },
    {
      "name": "Chioma Chinedu",
      "img": "https://images.pexels.com/photos/4491630/pexels-photo-4491630.jpeg?auto=compress&cs=tinysrgb&w=1600",
    },
  ];
}

以上代码展示了一个简单的应用，其中包含一个学生名单，每个学生条目都可以滑动并执行点赞或删除操作。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用slideable插件的示例代码。slideable插件允许你对列表项进行滑动操作，比如删除、归档等。这里我们将使用flutter_slideable包，它是一个流行的实现这一功能的插件。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_slideable: ^1.0.0  # 请确保使用最新版本

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

接下来，让我们编写一个使用Slideable组件的示例代码。假设我们有一个简单的待办事项列表，用户可以左右滑动来删除或标记为完成。

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

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

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

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  final List<String> todos = ['Todo 1', 'Todo 2', 'Todo 3'];

  void _removeTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  void _completeTodo(int index) {
    setState(() {
      todos[index] = todos[index] + ' (Completed)';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return Slideable(
            actions: <Widget>[
              IconSlideAction(
                caption: 'Delete',
                color: Colors.red,
                icon: Icons.delete,
                onTap: () => _removeTodo(index),
              ),
            ],
            secondaryActions: <Widget>[
              IconSlideAction(
                caption: 'Complete',
                color: Colors.green,
                icon: Icons.done,
                onTap: () => _completeTodo(index),
              ),
            ],
            child: ListTile(
              title: Text(todos[index]),
            ),
          );
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的待办事项列表，每个列表项都是一个Slideable组件。Slideable组件包含两个动作：一个是删除动作（红色图标），另一个是完成动作（绿色图标）。当用户向左或向右滑动列表项时，这些动作按钮就会出现，用户点击相应的按钮就会触发删除或完成操作。

  • actions参数定义了当用户向右滑动时出现的动作。
  • secondaryActions参数定义了当用户向左滑动时出现的动作。
  • child参数是滑动组件的内容，这里是一个ListTile。

这个示例展示了如何在Flutter中使用flutter_slideable包来实现列表项的滑动操作。你可以根据需要进一步自定义和扩展这个示例。

回到顶部