Flutter界面缩放插件flutter_scalable的使用

特性

本插件允许你在项目中使用可缩放的尺寸。

开始使用

要开始使用 flutter_scalable 插件，首先需要将其添加到你的 pubspec.yaml 文件中。然后在你的项目中导入该包。

导入包

import 'package:flutter_scalable/flutter_scalable.dart';

使用

首先，在你的主文件中初始化 FlutterScalable。这样你就可以在整个应用中使用可缩放的尺寸了。

初始化 FlutterScalable

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

  // 这个小部件是你应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterScalable(
      builder: (context) {
        return MaterialApp(
          title: 'Flutter Scalable',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 flutter_scalable 插件来创建一个具有缩放功能的应用程序。

示例代码

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

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

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

  // 这个小部件是你应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterScalable(
      builder: (context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用程序的主页。它是一个状态小部件，意味着它有一个状态对象（定义在下面），该对象包含影响其外观的字段。
  // 这个类是状态的配置。它保存由父组件（在这个例子中是App小部件）提供的值（在这种情况下是标题），并用于State的构建方法。
  // 小部件子类中的字段总是标记为“final”。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个调用告诉Flutter框架某些东西已经改变，这会导致它重新运行下面的构建方法，
      // 以便显示可以反映更新后的值。如果我们不调用setState()而改变_counter，那么构建方法将不会被再次调用，
      // 因此似乎什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时，此方法都会被重新运行，例如上面的_incrementCounter方法。
    //
    // Flutter框架已被优化以使重新运行构建方法变得快速，因此你可以只重建需要更新的部分，
    // 而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试：尝试在这里将颜色更改为特定颜色（例如Colors.amber），并触发热重载以查看AppBar颜色的变化，
        // 同时其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从由App.build方法创建的MyHomePage对象中获取值，并使用它设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将它放在父元素的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并垂直排列它们。
          // 默认情况下，它水平调整自己的大小以适应其子元素，并尽可能与父元素一样高。
          //
          // Column有许多属性可以控制其自身大小及其子元素的位置。这里我们使用mainAxisAlignment将子元素垂直居中；
          // 主轴在这里是垂直轴，因为Columns是垂直的（交叉轴将是水平的）。
          //
          // 尝试：启用“调试绘制”（在IDE中选择“切换调试绘制”操作，或在控制台中按“p”键），以查看每个小部件的线框图。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding:  EdgeInsets.all(Sp.width(20)), // 使用Sp.width(20)进行缩放
              child: const Text(
                '你已经按下了按钮这么多次：',
              ),
            ),
            20.hs, // 使用20.hs进行缩放
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个逗号使自动格式化更美观
    );
  }
}