Flutter滑动操作插件swipeable_null

Flutter滑动操作插件swipeable_null_safety的使用

swipeable_null_safety 是 swipeable 插件的一个安全版本，它可以在滑动超过一定阈值时触发事件。此插件可以帮助你在Flutter应用中实现类似滑动删除或滑动选择的功能。

使用

要使用 swipeable_null_safety 插件，可以参考以下示例代码：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const SwipeableDemo(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

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

  @override
  SwipeableDemoState createState() {
    return SwipeableDemoState();
  }
}

class SwipeableDemoState extends State<SwipeableDemo> {
  bool leftSelected = false;
  bool rightSelected = false;

  @override
  Widget build(BuildContext context) {
    String text = "nothing selected";

    if (leftSelected) text = "left selected";

    if (rightSelected) text = "right selected";

    return Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.all(8.0),
            child: Swipeable(
              threshold: 60.0, // 滑动阈值为60像素
              onSwipeLeft: () {
                setState(() {
                  rightSelected = true;
                  leftSelected = false;
                });
              },
              onSwipeRight: () {
                setState(() {
                  rightSelected = false;
                  leftSelected = true;
                });
              },
              child: Container(
                child: ListTile(title: Text(text)),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
              ),
              background: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: const BorderRadius.all(Radius.circular(8.0)),
                ),
                child: ListTile(
                  leading: Container(
                    width: 12.0,
                    height: 12.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: leftSelected ? Colors.blue[500] : Colors.grey[600],
                    ),
                  ),
                  trailing: Container(
                    width: 12.0,
                    height: 12.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: rightSelected
                          ? Colors.lightGreen[500]
                          : Colors.grey[600],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

代码说明

导入必要的包

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

创建主应用类
```
void main() => runApp(const MyApp());
```

定义主应用类

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const SwipeableDemo(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

定义滑动演示类

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

  @override
  SwipeableDemoState createState() {
    return SwipeableDemoState();
  }
}

定义滑动演示状态类

class SwipeableDemoState extends State<SwipeableDemo> {
  bool leftSelected = false;
  bool rightSelected = false;

  @override
  Widget build(BuildContext context) {
    String text = "nothing selected";

    if (leftSelected) text = "left selected";

    if (rightSelected) text = "right selected";

    return Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.all(8.0),
            child: Swipeable(
              threshold: 60.0, // 滑动阈值为60像素
              onSwipeLeft: () {
                setState(() {
                  rightSelected = true;
                  leftSelected = false;
                });
              },
              onSwipeRight: () {
                setState(() {
                  rightSelected = false;
                  leftSelected = true;
                });
              },
              child: Container(
                child: ListTile(title: Text(text)),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
              ),
              background: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: const BorderRadius.all(Radius.circular(8.0)),
                ),
                child: ListTile(
                  leading: Container(
                    width: 12.0,
                    height: 12.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: leftSelected ? Colors.blue[500] : Colors.grey[600],
                    ),
                  ),
                  trailing: Container(
                    width: 12.0,
                    height: 12.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: rightSelected
                          ? Colors.lightGreen[500]
                          : Colors.grey[600],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

nodeper 1楼

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

当然，以下是如何在Flutter项目中使用swipeable_null_safety插件的一个示例。这个插件允许你创建可以左右滑动的卡片或列表项。首先，确保你已经在pubspec.yaml文件中添加了依赖项：

dependencies:
  flutter:
    sdk: flutter
  swipeable_null_safety: ^x.y.z  # 替换为最新版本号

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

接下来是一个简单的示例代码，展示如何使用swipeable_null_safety插件来创建一个可以左右滑动的列表：

import 'package:flutter/material.dart';
import 'package:swipeable_null_safety/swipeable.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Swipeable Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Swipeable Example'),
        ),
        body: SwipeableList(),
      ),
    );
  }
}

class SwipeableList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return Swipeable(
          onSwipedLeft: () {
            print("Item $index swiped left");
          },
          onSwipedRight: () {
            print("Item $index swiped right");
          },
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text("Item $index"),
            ),
          ),
        );
      },
    );
  }
}

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

引入依赖：导入swipeable_null_safety包。
创建主应用：在MyApp中定义了一个基本的MaterialApp，并设置了主页为Scaffold。
创建可滑动的列表：在SwipeableList中，我们使用ListView.builder来创建一个列表。每个列表项都是一个Swipeable组件。
定义滑动行为：在Swipeable组件中，我们定义了左右滑动的回调方法onSwipedLeft和onSwipedRight，当滑动发生时，会打印相应的信息。
定义子组件：Swipeable的子组件是一个简单的Card，里面包含一个文本。

运行这个示例，你会看到一个可以左右滑动的列表，当你滑动某个列表项时，控制台会输出相应的信息。

注意：在实际使用中，你可能需要根据项目的需求调整滑动后的行为，比如更新UI状态、导航到其他页面等。这个示例只是展示了基本的用法。