Flutter文本滑动浏览插件SwipeThroughText的使用

预览

限制

目前该插件仅支持单行文本。溢出的文本将被裁剪并在末尾添加省略号 ...。这是一个暂时的限制，欢迎贡献以增加对多行文本的支持。

开始使用

安装

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

dependencies:
  swipe_through_text: ^0.0.4 

然后在终端运行 flutter pub get。

使用

首先，导入该包到你的Dart代码中：

import 'package:swipe_through_text/swipe_through_text.dart';

使用 SwipeThroughText 小部件时，可以传递必需的参数（如 text 和 textStyle）和可选参数（如 strikethroughColor、strikethroughLineHeight、swipeThreshold、onSwipeComplete、onSwipeCancel 和 dashArray）。

SwipeThroughText(
  text: 'Swipe me!',
  textStyle: TextStyle(fontSize: 24),
  strikethroughColor: Colors.red,
  strikethroughLineHeight: 4,
  swipeThreshold: 0.8,
  onSwipeComplete: (fraction) {
    // 当滑动完成时执行的操作
  },
  onSwipeCancel: (fraction) {
    // 当滑动取消时执行的操作
  },
)

你还可以通过 dashArray 参数自定义删除线。dashArray 接受一个双精度值列表，用于确定删除线中虚线和间隙的长度。例如，[10, 5] 将创建一个虚线删除线，其中虚线长度为10像素，间隙长度为5像素。

示例

以下是一个完整的示例，展示了如何使用 SwipeThroughText 小部件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SwipeThroughText Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SwipeThroughText Demo'),
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SwipeThroughText(
                text: 'Swipe Through me! limited to 1 line',
                textStyle: const TextStyle(fontSize: 24),
                strikethroughColor: Colors.red,
                strikethroughLineHeight: 4,
                swipeThreshold: 0.5,
                onSwipeComplete: (fraction) {
                  debugPrint('Swipe completed at $fraction');
                },
                onSwipeCancel: (fraction) {
                  debugPrint('Swipe cancelled at $fraction');
                },
                dashArray: const [], // 对于虚线使用：const [10, 5],
              ),
              const SizedBox(
                height: 10,
              ),
              SwipeThroughText(
                text: 'Swipe Through me! limited to 1 line',
                textStyle: const TextStyle(fontSize: 24),
                strikethroughColor: Colors.green,
                strikethroughLineHeight: 4,
                swipeThreshold: 0.5,
                onSwipeComplete: (fraction) {
                  debugPrint('Swipe completed at $fraction');
                },
                onSwipeCancel: (fraction) {
                  debugPrint('Swipe cancelled at $fraction');
                },
                dashArray: const [10, 5],
              ),
              const SizedBox(
                height: 10,
              ),
              SwipeThroughText(
                text: 'Swipe Through me! limited to 1 line',
                textStyle: const TextStyle(fontSize: 24),
                strikethroughColor: Colors.purple,
                strikethroughLineHeight: 4,
                swipeThreshold: 0.5,
                onSwipeComplete: (fraction) {
                  debugPrint('Swipe completed at $fraction');
                },
                onSwipeCancel: (fraction) {
                  debugPrint('Swipe cancelled at $fraction');
                },
                dashArray: const [], // 对于虚线使用：const [10, 5],
              ),
            ],
          ),
        ),
      ),
    );
  }
}