Flutter MediaQuery for Surface 双核处理器技术Flutter MediaQuery for Surface Duo


本文介绍的功能和指南为 公共预览版,在正式发布之前可能会有重大修改。This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft 不对此处提供的信息作任何明示或默示的担保。Microsoft makes no warranties, express or implied, with respect to the information provided here.

当你需要有关设备的信息(如屏幕大小、显示密度、文本缩放等)时, MediaQuery是在 Flutter 中使用的组件。MediaQuery is the component you use in Flutter when you want information about the device, like the screen size, display density, text scaling, and so on. 显示器之间的枢轴被视为显示部分。The hinge between the displays is considered a part of the display. 当你的应用程序跨区时,它的屏幕大小是这两个屏幕(包括枢轴)的整个区域,并将转轴区报告为 显示功能When your app is spanned, the screen size for it is the whole area of both screens, including the hinge, with the hinge area being reported as a display feature.

新的 MediaQuery 属性New MediaQuery properties

  • displayFeatures -> List<DisplayFeature> -硬件功能阻碍的显示区域。displayFeatures -> List<DisplayFeature> - Areas of the display that are obstructed by hardware features.
  • hinge -> DisplayFeature? - [Nullable] 由转轴特别挡住的显示区域。hinge -> DisplayFeature? - [Nullable] Area of the display that is obstructed by the hinge specifically.

显示功能Display features

显示功能是指不能正常工作或受阻的显示区域。Display features are areas of the display that can be non-functional or obstructed.

class DisplayFeature {
    final Rect bounds;
    final DisplayFeatureType type;
    final DisplayFeatureState state;

的属性 DisplayFeatureProperties of a DisplayFeature:

  • bounds - Rect 此显示功能所占用的视图区域bounds - Rect area of the view occupied by this display feature
  • type -显示功能类型的枚举:type - Enum for type of display features:
    • hinge -设备的两个显示器之间的物理分隔符。hinge - A physical separator between the two displays of the device. Surface 双核具有 hinge 显示功能。Surface Duo has a hinge display feature. 显示功能类型:转轴Display Feature Type: Hinge
    • fold -以 hinge 零宽度的形式查看此。fold - View this as a hinge that has zero width. 它标识灵活显示具有折痕的位置。It identifies where the flexible display has a crease. 显示功能类型:折叠Display Feature Type: Fold
    • cutout -位于显示屏边缘,通常承载照相机系统。cutout - Sits at the edge of the display and usually houses camera systems. 显示特征类型:切口Display Feature Type: Cutout
  • state -用于显示功能的枚举,只填充折叠和转轴。state - Enum for posture of display feature, which is populated only for folds and hinges. 对于切口,这是 unknownFor cutouts, this is unknown. 这会严格遵循 Android 的状态定义。This closely follows the Posture definition from Android.
    • halfOpened -可折叠设备的转轴处于打开状态和已关闭状态之间的中间位置,在挠性屏幕的各部分之间或在物理屏幕面板之间存在非平整角度。halfOpened - The foldable device's hinge is in an intermediate position between opened and closed state, there is a non-flat angle between parts of the flexible screen or between physical screen panels.
    • flat -可折叠设备完全打开,显示给用户的屏幕空间是平面的。flat - The foldable device is completely open, the screen space that is presented to the user is flat.
    • flipped -可折叠的设备与灵活的屏幕部件或以相反方向的物理屏幕翻转。flipped - The foldable device is flipped with the flexible screen parts or physical screens facing opposite directions.
    • unknown -方法未知,因为它是新的且不受支持,或者,对于 cutout 功能,则不会填充。unknown - Posture is unknown, either because it is new and unsupported or, in the case of cutout features, it is not populated.

hinge 属性The hinge property

对于三种类型的显示功能, cutoutfold 类型将不太常用。Of the three types of display features, cutout and fold types will be used less often. 你已使用 SafeArea 来避免 cutout 功能,无需避免功能, fold 因为显示是连续的。You already use SafeArea for avoiding cutout features and you don't need to avoid fold features since the display is continuous. hinge 属性已添加到中, MediaQuery 可以方便地获取转轴,而不必筛选 displayFeatures 列表。The hinge property was added to MediaQuery as a convenient way to get the hinge without having to filter the displayFeatures list. 查看此快捷方式可使代码更易于阅读。View it as a shortcut that makes your code easier to read. 这是 Dart 中的实现:This is the implementation in Dart:

DisplayFeature? get hinge {
    for (DisplayFeature e in displayFeatures) {
      if (e.type == DisplayFeatureType.hinge) return e;
    return null;

hinge如果设备没有枢轴,或者该应用没有跨区,并且该应用未重叠,则将为 null。The hinge will be null if the device either does not have a hinge, or if the app is not spanned and so the hinge does not overlap our app. 下面的示例演示如何了解应用程序是否可使用转轴:Here's an example of how to know if the screen available to the app has a hinge:

final hinge = MediaQuery.of(context).hinge;
if (hinge==null) {
    print('No hinge');
} else {
    print('Hinge is ${hinge.bounds.width} logical pixels wide');

使用 hinge 属性时,可以轻松地调整 Surface 双核的布局,使用 TwoPane 小组件 可以更方便地定义用于缩放 surface 双核的布局,还可以更轻松地定义平板电脑和桌面。While working with the hinge property makes it easy to adapt your layouts for Surface Duo, using the TwoPane widget can make it even easier to define a layout that scales for Surface Duo, but also for tablet and desktop.