CSS 单位

添加 CSS 视口单位转换器 – vmin, vmax, vw, vh, rem。

一个方便的包装器，用于相对于屏幕或 BoxConstraints LayoutBuilder 来设置尺寸

理念

想法是添加 CSS Units 3 规范中的相对单位。在没有函数和类的情况下实现这一点，只需扩展标准的 double

  • 42.vmin – 屏幕最小边的 42%（以逻辑像素为单位，double 类型）
  • 42.vmax – 屏幕最大边的 42%（以逻辑像素为单位，double 类型）
  • 42.vw – 屏幕宽度的 42%（以逻辑像素为单位，double 类型）
  • 42.vh – 屏幕高度的 42%（以逻辑像素为单位，double 类型）
  • 1.5.rem – 默认字体大小的一点五倍（如果未更改，则默认为 fontSize=14.0）（以逻辑像素为单位，double 类型）

此外，还添加了百分比

  • 42.pc – 42%，即数字 0.42（double 类型）

基于 dimension 包

特点

可读性！

看看如何优雅且清晰地设置相对尺寸：width: 4.vmax

安装

更改 pubspec.yaml（并隐式运行 pub get）

dependencies:
  css_units:
    git:
      url: https://github.com/dmitrymaslovhome/css_units

用法

注意！在使用相对单位之前，必须始终调用 CssViewportUnits.initContextSizes(context); – 这将是计算尺寸的依据。可以只在最顶层的父级小部件中调用一次。

例如，让我们为容器设置 20 vmin 的尺寸

@override
Widget build(BuildContext context) {
  CssViewportUnits.initContextSizes(context);
  return Container(
    width: 20.vmin,
    height: 20.vmin,
    margin: EdgeInsets.all(1.vmin),
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(1.vmin),
    ),
  );
}

了解这些尺寸是什么

https://alligator.io/css/viewport-units/

https://learn.javascript.ru/css-units

GitHub

查看 Github