Flutter 适配移动端、WEB端的简单方式_flutter 跨端pc移动端ui组件

Flutter 提供了一些方法和组件可以帮助我们实现这个功能。

以下是三种方式，思想类似，可以参考

使用 LayoutBuilder 组件

可以使用 LayoutBuilder 组件，根据父 Widget 的约束条件来构建不同的子 Widget。

LayoutBuilder 有一个 builder 属性，它是一个函数，接受一个 BuildContext 参数和一个 BoxConstraints 参数，返回一个 Widget。

通过 BoxConstraints 参数来获取父 Widget 的最大和最小宽度和高度，然后根据这些值来判断当前的屏幕大小和方向，从而返回不同的 Widget。代码如下：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      // 如果屏幕宽度小于 600 像素，返回一个适合手机的 Widget
      return PhoneWidget();
    } else {
      // 如果屏幕宽度大于等于 600 像素，返回一个适合 Web 的 Widget
      return WebWidget();
    }
  },
)

使用MediaQuery.of

使用 MediaQuery.of(context) 来获取当前媒体查询数据，它包含了屏幕的尺寸，方向，像素密度，亮度等信息，你可以根据这些信息来调整你的 Widget。代码如下：

var mediaQuery = MediaQuery.of(context);
if (mediaQuery.orientation == Orientation.portrait) {
  // 如果屏幕方向是竖屏，返回一个适合竖屏的 Widget
  return PortraitWidget();
} else {
  // 如果屏幕方向是横屏，返回一个适合横屏的 Widget
  return LandscapeWidget();
}

使用kIsWeb常量

使用 kIsWeb 常量来判断当前应用程序是否运行在 Web 平台上，如果是，你可以返回一个专门为 Web 设计的 Widget，如果不是，你可以返回一个适合移动端的 Widget。代码如下：

if (kIsWeb) {
  // 如果当前是 Web 平台，返回一个 Web Widget
  return WebWidget();
} else {
  // 如果当前不是 Web 平台，返回一个 Phone Widget
  return PhoneWidget();
}

以上三种方式能够根据需要适配移动端与WEB端，可以根据实际情况做选择，以下是我在项目中使用的方式，能够更好的适配移动端与WEB端

class Util {
  static const webStyleWidth = 912;
 
  static isPhoneStyle(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    // 竖屏且最小尺寸小于webStyleWidth 或 横屏且最大尺寸小于webStyleWidth
    return (mediaQuery.orientation == Orientation.portrait && mediaQuery.size.shortestSide <= webStyleWidth)
      || (mediaQuery.orientation == Orientation.landscape && mediaQuery.size.longestSide <= webStyleWidth));
  }
}