Flutter 尺寸获取与管理插件 dimension 的使用

dimension 是一个用于 Flutter 的包，它引入了 Dimension/Length 类。这个类模仿了 CSS 的长度系统，并支持四种单位：px、百分比、vw、vh、vmin 和 vmax。用户需要提供约束值和屏幕尺寸以从 Length 类中获取像素值。

此外，Dimension 类还支持加减操作、min、max 和 clamp 函数，并且可以进行序列化和反序列化。这使得创建响应式应用变得更加容易。

快速开始

创建 Dimension 实例

var length = Length(10.0, unit: LengthUnit.percent);

获取实际的像素值

通过调用 toPX 方法来获取实际的像素值：

double px = length.toPX(
  constraint: 100, 
  screenSize: MediaQuery.of(context).size
);

其中 constraint 可以从父组件的 BoxConstraints 中获取，而 screenSize 可以通过 MediaQuery 获取。

从数字创建 Length 实例

你也可以直接从数字创建 Length 实例：

length = 10.toPXLength; // 10 像素
length = 10.toPercentLength; // 父级约束的 10%
length = 10.toVWLength; // 屏幕宽度的 10%
length = 10.toVHLength; // 屏幕高度的 10%

加减 Length

你可以对多个 Length 进行加减操作：

length = 100.toVWLength - 10.toPXLength + 20.toPercentLength;

还可以使用 min()、max() 或 clamp() 函数：

length = Dimension.max(100.toPXLength, 10.toVWLength);
length = Dimension.clamp(10.toVWLength, 100.toPXLength, 20.toPercentLength);

这些操作可以嵌套和组合使用。

DimensionSizedBox

你可以手动调用 toPX() 方法并将结果传递给 SizedBox，或者使用 DimensionSizedBox：

const DimensionSizedBox({
  Key? key,
  this.width,
  this.height,
  Widget? child,
}) : super(key: key, child: child);

final Dimension? width;
final Dimension? height;

DimensionSizedBox 类似于 SizedBox，但它接受两个 Dimension 实例作为参数。

注意，如果该小部件有一个未绑定的父级 maxWidth，并且宽度参数依赖于父级（具有百分比单位），则父级 maxWidth 将被限制为屏幕宽度。这确保了此盒子始终有界，除非你使用类似 Length(double.infinite) 的东西。

序列化

任何 Dimension 实例都可以进行序列化和反序列化：

String jsonStr = json.encode(length.toJson());

然后可以通过以下方式恢复 Dimension 实例：

Dimension newLength = parseDimension(jsonStr);

示例 Demo

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 dimension 包：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool toggle = true;

  late Dimension beginWidth;
  late Dimension beginHeight;
  late Dimension endWidth;
  late Dimension endHeight;

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    beginWidth = Dimension.max(20.toPercentLength, 700.toPXLength);
    beginHeight = (90.toVHLength - 10.toPXLength);

    endWidth = Dimension.clamp(200.toPXLength, 40.toVWLength, 200.toPXLength);
    endHeight = 50.toVHLength +
        10.toPercentLength -
        Dimension.min(4.toPercentLength, 40.toPXLength);

    return Scaffold(
      appBar: AppBar(
        title: Text("Dimension Demo"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            toggle = !toggle;
          });
        },
      ),
      body: Container(
        alignment: Alignment.center,
        color: Colors.green,
        child: AnimatedDimensionSizedBox(
          duration: Duration(seconds: 2),
          width: toggle ? beginWidth : endWidth,
          height: toggle ? beginHeight : endHeight,
          child: Container(
            alignment: Alignment.topCenter,
            color: Colors.amberAccent,
            child: DefaultTextStyle(
              style: TextStyle(fontSize: 16, height: 1.5),
              textAlign: TextAlign.center,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("Screen Size: " + screenSize.toString()),
                    Text("Begin Width: " + beginWidth.toString()),
                    Text("End Width: " + endWidth.toString()),
                    Text("Begin Width in PX: " +
                        beginWidth
                            .toPX(
                              constraint: screenSize.width,
                              screenSize: screenSize,
                            )
                            .toString() +
                        ", End Width in PX: " +
                        endWidth
                            .toPX(
                              constraint: screenSize.width,
                              screenSize: screenSize,
                            )
                            .toString()),
                    Text("Begin Height: " + beginHeight.toString()),
                    Text("End Height: " + endHeight.toString()),
                    Text("Begin Height in PX: " +
                        beginHeight
                            .toPX(
                              constraint: screenSize.height,
                              screenSize: screenSize,
                            )
                            .toString() +
                        ", End Height in PX: " +
                        endHeight
                            .toPX(
                              constraint: screenSize.height,
                              screenSize: screenSize,
                            )
                            .toString()),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: DimensionSizedBox(
                        width: 50.toPercentLength,
                        height: 50.toPercentLength,
                        child: Container(
                          color: Colors.blue,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 dimension 包来创建响应式的布局，并演示了如何动态调整小部件的大小。