Flutter 屏幕适配：精妙的方案，简便的使用

2023-10-09 03:20:31

Flutter，作为当下流行的跨平台开发框架，以其强大的功能和简洁的语法备受开发者的青睐。在 Flutter 开发中，屏幕适配是一项至关重要的技术，它能够确保您的应用程序在不同设备上都能正常显示，带来良好的用户体验。

在本文中，我们将探讨三种常用的 Flutter 屏幕适配方案：设备适配、像素适配和屏幕比例适配。每种方案都有其独特的优势和适用场景，您可以根据您的项目需求选择最适合的一种。

方案一：设备适配

设备适配是最简单直接的屏幕适配方案。它通过检测设备的具体型号来适配屏幕尺寸。这种方案的优点在于实现简单，无需复杂的计算，但缺点在于适配范围有限，只适用于特定设备型号。

import 'package:flutter/widgets.dart';

class DeviceAdapter extends StatelessWidget {
  final Widget child;

  DeviceAdapter({required this.child});

  @override
  Widget build(BuildContext context) {
    var deviceWidth = MediaQuery.of(context).size.width;
    var deviceHeight = MediaQuery.of(context).size.height;

    // 根据设备型号适配屏幕尺寸
    if (deviceWidth >= 360 && deviceWidth < 412) {
      // iPhone 6/7/8
      return Container(
        width: 375,
        height: 667,
        child: child,
      );
    } else if (deviceWidth >= 412 && deviceWidth < 480) {
      // iPhone X/XS
      return Container(
        width: 375,
        height: 812,
        child: child,
      );
    } else if (deviceWidth >= 480 && deviceWidth < 540) {
      // iPhone 11/12 mini
      return Container(
        width: 375,
        height: 828,
        child: child,
      );
    } else if (deviceWidth >= 540 && deviceWidth < 640) {
      // iPhone 11/12/13/14
      return Container(
        width: 414,
        height: 896,
        child: child,
      );
    } else if (deviceWidth >= 640 && deviceWidth < 720) {
      // iPhone 11/12/13/14 Pro Max
      return Container(
        width: 428,
        height: 926,
        child: child,
      );
    } else if (deviceWidth >= 720 && deviceWidth < 840) {
      // iPad Air 2/3
      return Container(
        width: 820,
        height: 1180,
        child: child,
      );
    } else if (deviceWidth >= 840 && deviceWidth < 1024) {
      // iPad Pro 10.5英寸
      return Container(
        width: 1024,
        height: 1366,
        child: child,
      );
    } else if (deviceWidth >= 1024 && deviceWidth < 1280) {
      // iPad Pro 12.9英寸
      return Container(
        width: 1280,
        height: 1820,
        child: child,
      );
    } else {
      // 其他设备
      return child;
    }
  }
}

方案二：像素适配

像素适配是一种更为通用的屏幕适配方案。它通过将设备的屏幕宽度和高度划分为相等的小块，然后根据小块的尺寸来适配界面的元素。这种方案的优点在于适配范围广，能够适应各种不同设备，但缺点在于实现相对复杂，需要进行大量的计算。

import 'package:flutter/widgets.dart';

class PixelAdapter extends StatelessWidget {
  final Widget child;

  PixelAdapter({required this.child});

  @override
  Widget build(BuildContext context) {
    var deviceWidth = MediaQuery.of(context).size.width;
    var deviceHeight = MediaQuery.of(context).size.height;

    // 设计稿的宽度和高度
    var designWidth = 375;
    var designHeight = 812;

    // 屏幕宽度和高度的比例
    var scaleWidth = deviceWidth / designWidth;
    var scaleHeight = deviceHeight / designHeight;

    // 根据比例适配界面的元素
    return Transform.scale(
      scale: scaleWidth,
      child: child,
    );
  }
}

方案三：屏幕比例适配

屏幕比例适配是一种介于设备适配和像素适配之间的屏幕适配方案。它通过计算设备的屏幕比例来适配界面的元素。这种方案的优点在于实现简单，适配范围广，但缺点在于可能存在精度问题，无法完美适配所有设备。

import 'package:flutter/widgets.dart';

class AspectRatioAdapter extends StatelessWidget {
  final Widget child;

  AspectRatioAdapter({required this.child});

  @override
  Widget build(BuildContext context) {
    var deviceWidth = MediaQuery.of(context).size.width;
    var deviceHeight = MediaQuery.of(context).size.height;

    // 设计稿的宽度和高度
    var designWidth = 375;
    var designHeight = 812;

    // 屏幕宽高比
    var aspectRatio = deviceWidth / deviceHeight;

    // 设计稿的宽高比
    var designAspectRatio = designWidth / designHeight;

    // 根据宽高比适配界面的元素
    if (aspectRatio > designAspectRatio) {
      // 宽屏设备
      return Container(
        width: deviceWidth,
        height: deviceWidth / designAspectRatio,
        child: child,
      );
    } else {
      // 窄屏设备
      return Container(
        width: deviceHeight * designAspectRatio,
        height: deviceHeight,
        child: child,
      );
    }
  }
}