Flutter手势缩放插件pinch_scale的使用

Flutter手势缩放插件pinch_scale的使用

Pinch Scale

这是一个简单的控件，用于通过捏合手势来缩放任何双精度值，例如文本大小、图像大小等。你可以将新的值保存到本地存储中。

开始使用

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

dependencies:
  ...
  pinch_scale:

导入它：

import 'package:pinch_scale/pinch_scale.dart';

使用示例

文本大小改变器

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

  // 初始文本大小
  final baseTextSizeValue = 20.0;
  // 创建一个ValueNotifier来监听文本大小的变化
  late final fontSize = ValueNotifier<double>(baseTextSizeValue);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PinchScale(
      // 设置初始值
      baseValue: baseTextSizeValue,
      // 获取当前值的方法
      currentValue: () => fontSize.value,
      // 当值改变时调用的方法
      onValueChanged: (double newFontSize) => fontSize.value = newFontSize,
      child: Center(
        child: ValueListenableBuilder<double>(
          valueListenable: fontSize, // 监听字体大小的变化
          builder: (context, fontSize, child) {
            return Text(
              r'''Balıklıgöl appears to have been a venerated site long before the time of Abraham...''',
              style: TextStyle(fontSize: fontSize), // 根据fontSize调整文本大小
            );
          },
        ),
      ),
    );
  }
}

图像高度改变器

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

  // 初始图像高度
  final double imageHeightBaseValue = 250;
  // 创建一个ValueNotifier来监听图像高度的变化
  late final ValueNotifier<double> imageHeight =
      ValueNotifier<double>(imageHeightBaseValue);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PinchScale(
      // 设置初始值
      baseValue: imageHeightBaseValue,
      // 设置最大值为屏幕的高度
      maxValue: MediaQuery.of(context).size.height,
      // 获取当前值的方法
      currentValue: () => imageHeight.value,
      // 当值改变时调用的方法
      onValueChanged: (double height) => imageHeight.value = height,
      child: Center(
        child: ValueListenableBuilder<double>(
          valueListenable: imageHeight, // 监听图像高度的变化
          builder: (context, fontSize, child) {
            return Image.network(
              'https://images.unsplash.com/photo-1520763185298-1b434c919102?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2532&q=80',
              height: imageHeight.value, // 根据imageHeight调整图像高度
              fit: BoxFit.cover,
            );
          },
        ),
      ),
    );
  }
}

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Pinch Scale Example')),
        body: Padding(
          padding: EdgeInsets.all(10),
          child: ExampleSwitcher(),
        ),
      ),
    );
  }
}

class ExampleSwitcher extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: TextSizeChanger()),
        SizedBox(height: 20),
        Expanded(child: ImageSizeChanger()),
      ],
    );
  }
}

// 上面已经定义了TextSizeChanger和ImageSizeChanger类