Flutter屏幕适配与缩放插件flutter_scaler的使用

简介

flutter_scaler 是一个用于在 Flutter 应用中实现屏幕适配和缩放的插件。它提供了 ScalePicker 小部件，可以轻松地为用户展示不同类型的刻度或标尺，并支持通过滑动选择特定值。此插件非常适合需要长度测量功能的应用场景，例如建筑、设计等领域。

使用步骤

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_scaler:

然后运行以下命令以安装依赖：

flutter pub get

2. 导入库并初始化应用

首先，在项目中导入必要的库并创建一个简单的 Flutter 应用：

import 'package:flutter/material.dart';
import 'package:flutter_scaler/scale.dart'; // 导入 ScalePicker 小部件

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

3. 使用 ScalePicker 实现屏幕适配

接下来，我们通过 ScalePicker 来实现屏幕适配和缩放功能。以下是完整的代码示例：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScalePickerController _scalePickerController = ScalePickerController();
  double scaleValue = 0;
  double verticalScaleValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            // 水平刻度尺
            ScalePicker(
              height: 80,
              width: MediaQuery.of(context).size.width,
              isInvertedScale: true, // 是否反转刻度
              backgroundColor: Colors.greenAccent[200]!.withOpacity(0.5) as Color,
              bigTickColor: Colors.greenAccent,
              initialValue: 33, // 初始值
              onValueChange: (value) {
                setState(() => scaleValue = value.toDouble());
              },
              scalePickerController: _scalePickerController,
            ),

            // 垂直刻度尺
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ScalePicker(
                  backgroundColor: Colors.yellowAccent[200]!.withOpacity(0.5) as Color,
                  isAxisVertical: true, // 垂直方向
                  width: 120,
                  height: MediaQuery.of(context).size.height - 300,
                  isInvertedScale: false,
                  bigTickColor: Colors.greenAccent,
                  initialValue: 33,
                  onValueChange: (value) {
                    setState(() => scaleValue = value.toDouble());
                  },
                  scalePickerController: _scalePickerController,
                ),
                ScalePicker(
                  isAxisVertical: true,
                  backgroundColor: Colors.blueAccent[200]!.withOpacity(0.5) as Color,
                  width: 120,
                  height: MediaQuery.of(context).size.height - 300,
                  isInvertedScale: true,
                  bigTickColor: Colors.greenAccent,
                  initialValue: 33,
                  shouldTextBeAlignedHorizontallyOnVerticalScroll: true,
                  onValueChange: (value) {
                    setState(() => scaleValue = value.toDouble());
                  },
                  scalePickerController: _scalePickerController,
                ),
                ScalePicker(
                  isAxisVertical: true,
                  backgroundColor: Colors.black.withOpacity(0.5) as Color,
                  width: 120,
                  height: MediaQuery.of(context).size.height - 300,
                  isInvertedScale: true,
                  bigTickColor: Colors.greenAccent,
                  initialValue: 33,
                  onValueChange: (value) {
                    setState(() => scaleValue = value.toDouble());
                  },
                  scalePickerController: _scalePickerController,
                ),
              ],
            ),

            // 另一条水平刻度尺
            ScalePicker(
              backgroundColor: Colors.pink[200]!.withOpacity(0.5) as Color,
              height: 80,
              width: MediaQuery.of(context).size.width,
              isInvertedScale: false,
              bigTickColor: Colors.greenAccent,
              initialValue: 33,
              onValueChange: (value) {
                setState(() => scaleValue = value.toDouble());
              },
              scalePickerController: _scalePickerController,
            ),
          ],
        ),
      ),
    );
  }
}