2

我设计了 Figma，我需要在我的颤振应用程序中应用它。但我有一定的困难，所以按顺序。

我尝试的第一件事是使用自动导入工具，我尝试过：

  • Adobe XD 到 Flutter

  • 超新星工作室

不幸的是，这些工具仍处于起步阶段。它们提供了一些好处，但不提供全部进口

我还为 Figma 使用了几个插件：

  • Figma 飘飘然

  • Figma 到代码

但这些插件的功能也有限。我意识到我需要自己做。

Figma 页面尺寸为 320 像素。设备屏幕尺寸会有所不同。但我需要它看起来尽可能接近。我决定使用“比例法”。我正在使用具有以下扩展名的 figma 元素的尺寸：

  //SizeConfig
  screenWidth = _mediaQueryData.size.width;
  screenHeight = _mediaQueryData.size.height;   

  .....
  
  extension SizeDoubleExt on double {

  double h() {
    double screenHeight = SizeConfig.screenHeight;
    var res = (this / 693.0) * screenHeight;
    return res;
  }

  double w() {
    double screenWidth = SizeConfig.screenWidth;
    var res = (this / 320.0) * screenWidth;
    return res;
  }
}

例子：

 return Container(  width: 80.w(),    );

但结果并不让我满意。也许我需要考虑devicePixelRatio（逻辑像素），或者“比例法”是错误的。

主要问题是如何使 figma 的尺寸（尺寸）适应不同设备的尺寸？

任何建议-我将不胜感激。

4

1 回答 1

1

我找到了解决方案。我使用这个插件-flutter_screenutil

于 2022-02-17T07:19:47.537 回答