Flutter Web：创建具有移动应用大小的 UI

Posted 2023-02-23

【中文标题】Flutter Web：创建具有移动应用大小的 UI

【英文标题】：Flutter Web : Create UI with mobile app size

【发布时间】：2021-08-06 09:43:41

【问题描述】：

我有一个 Flutter 应用程序，它在 android 、 ios 和 Web 中运行良好。但是在网络中它的全屏宽度非常难看。我怎样才能像网页移动版一样创建 UI？

【问题讨论】：

这可能会帮助你medium.com/flutter-community/…

@NishuthanS 谢谢。这个类给出了屏幕尺寸，我可以告诉颤抖我想要整个屏幕宽度的 x% 。但我想告诉你，如果屏幕是用于移动设备的，你可以显示 100% 屏幕宽度的图像，如果它是网页版并在桌面操作系统中以 chrome 运行，你必须使用 50% 的屏幕宽度

【参考方案1】：

感谢@nishuthan-s，我用 KisWeb 和 Container 解决了我的问题

Center(
  child: Container(
    width: kIsWeb ? 400.0 : double.infinity,
    child: ListView.builder(...)
  ),
);

【参考方案2】：

参考This article，根据不同的屏幕尺寸有效缩放UI。

要确定用户是否正在使用浏览器，请使用kIsWeb

例如：

Image.network('Exampleurl.com',height:kIsWeb?webHeight:mobileHeight);

但是我个人使用这个类来动态调整大小，而不是上面提到的两者是相似的，但是下面给出的一个有两个函数来获取宽高比的宽度和高度。

Screensize.dart

class SizeConfig 
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double defaultSize;
  static Orientation orientation;

  void init(BuildContext context) 
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
  


// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) 
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;


// Get the proportionate width as per screen size
double getProportionateScreenWidth(double inputWidth) 
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;

例子：

Image.network('Exampleurl.com',height:getProportionateScreenHeight(150)); 

或

Image.network('Exampleurl.com',height:(kIsWeb)?getProportionateScreenHeight(250):getProportionateScreenHeight(100));

【讨论】：

非常感谢。我怎样才能用这个在网络中设置整个屏幕宽度？

@mmsh 可以使用SizeConfig.screenWidth获取全屏宽度，这将返回设备的全屏宽度。

谢谢。但是如何获得尺寸可以帮助我？如果应用程序在台式机或笔记本电脑的浏览器中运行，我真的想告诉你必须显示应用程序宽度移动宽度

kIsWeb（如果是 Web 浏览器则为 true）是一个全局变量，用于告知用户是在浏览器还是其他平台上使用它。

是的，我了解 KIsWeb 。但是如果 kIsWeb 为真，我应该使用女巫小部件，小部件宽度可以自定义整个屏幕宽度吗？