[Flutter翻译]迈向Flutter Web的旅程第三部分：设计-一一网

原文地址：medium.com/flutter-cla…

原文作者：medium.com/@hiashutosh

发布时间：2021年5月27日 – 3分钟阅读

如果您是直接来到这个页面，请确保在开始这个页面之前，您先通过走向Flutter Web的旅程：2。

在这篇文章中，我们将讨论如何在保持单一代码库的情况下，使应用程序在移动和网络上都能响应。

这里有一些Flutter提供的用于构建响应式布局的小工具。

自定义单子布局（CustomSingleChildLayout
自定义多子版图（CustomMultiChildLayout
合适的盒子
小数点阵图（FractionallySizedBox
布局生成器
媒体查询
媒体查询数据
方向构建器
纵横比

这些部件将帮助你使应用程序在不同尺寸的设备上响应，但在每个设备上的相同的用户界面看起来并不直观，如果你想在不同尺寸的设备上显示不同的用户界面，该怎么办？

下面是Rally项目的响应式用户界面的截图，该项目在移动和桌面视图上有不同的用户界面。

拉力赛的桌面界面

拉力赛的手机版界面

因此，在这种情况下，你需要使用一个断点，当设备宽度超过或低于该断点时，将改变UI，例如，如果我的断点是700px，那么当设备宽度≤700时显示移动UI，设备宽度>700且设备宽度<=1200时显示平板UI，设备宽度>1200时显示桌面UI。

如果你不想定义自己的断点，你可以使用这个包，它有很多断点。

下面是如何通过一个辅助类来实现上述条件的。

import 'package:flutter/material.dart';

/// list of all devices
enum DeviceType {
  desktop,
  tablet,
  handset,
}

/// breakpoints for desktop, tablet and handset
final desktop = 1200;
final tablet = 900;
final handset = 600;

DeviceType _displayTypeOf(BuildContext context) {
  /// Use shortestSide to detect device type regardless of orientation
  double deviceWidth = MediaQuery.of(context).size.shortestSide;

  if (deviceWidth > desktop) {
    return DeviceType.desktop;
  }
  if (deviceWidth > tablet) {
    return DeviceType.tablet;
  } else {
    return DeviceType.handset;
  }
}

bool isDeviceDesktop(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.desktop;
}

bool isDeviceTab(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.tablet;
}

bool isDeviceMobile(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.handset;
}
复制代码

让我们看看如何使用上面的辅助类。

Container(
  child: isDeviceDesktop(context)
      ? _buildDesktopUI()
      : isDeviceTab()
          ? _buildTabletUI()
          : _buildMobileUI(),
)
复制代码

请看这些例子项目以供参考。

如果你觉得这篇文章有用，请点击拍手图标?，并与你的朋友分享，因为这将激励我写更多的文章。
如有任何关于Flutter的疑问，请随时在社交媒体平台上与我联系。