HarmonyOS 鸿蒙Next中Flutter框架多设备开发指导-背景氛围场景

HarmonyOS 鸿蒙Next中Flutter框架多设备开发指导-背景氛围场景

场景概述

在移动应用开发中，不同设备的屏幕形态各异，如刘海屏、全面屏、折叠屏等，同时系统状态栏、导航栏、软键盘等元素也会占据屏幕空间。为了确保背景图片在各种设备和场景下都能正常显示，不会产生变形，本文将详细介绍RN图片组件的实现原理、适配指导以及具体的场景案例。

使用场景

背景是应用页面的常用场景，我们希望在不同设备上和横竖屏状态下背景图左右不会产生截断，并且保持正常宽高比。使得图片在保证美观的前提下，能够左右充满，下面是不同设备的背景氛围状态，包括：直板机、PAD、PC、折叠屏（阔折叠、双折叠、三折叠）。

图1 直扳机显示如下，点开状态和未点开状态：

图2 在双折叠展开态、三折叠M态、Pad mini，横屏、竖屏以如下方式显示（注意全屏时背景与状态栏、导航条避让）：

图3 三折叠G态的横屏、竖屏以如下方式显示（注意全屏时背景与状态栏、导航条避让）：

常见问题

开发过程中，由于图片不剪裁，拉伸过程中会出现相对的变形，视觉上会有差异。

多设备适配

背景相对位置锚定窗口位置，响应折叠屏开合接续元素不遮挡重叠。

适配分屏场景，背景尺寸随分屏窗口尺寸变化而自适应变化。

开发指导

Flutter开发

关键能力

flutter中image组件自带的fit属性

fit: BoxFit.cover

指导案例

在对应的背景氛围块中，获取到最大宽度，设置背景图片的fit属性即可。

示例代码

LayoutBuilder(builder:
(BuildContext context, BoxConstraints constraints) {
  return GestureDetector(
    onTap: () {
    },
    child: Container(
      width: constraints.maxWidth, // 使用父容器的最大宽度
      height: 260, // 设定高度
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/background/background.png'), // 替换为你的背景图片路径
          fit: BoxFit.fill,
        ),
      ),
    ),
  );
}),

背景氛围的Sample示例代码地址：example，开发者可以通过该地址查看完整的示例代码，并根据自己的需求进行修改和扩展。