Flutter屏幕适配: 抛弃繁琐，拥抱极简

Android

2023-09-30 00:07:14

引言：屏幕适配的意义

在移动应用开发中，屏幕适配至关重要。不同设备拥有不同的屏幕尺寸和像素密度，如果不进行适配，应用在不同设备上的显示效果会大相径庭，严重影响用户体验。

传统屏幕适配方式

传统的屏幕适配方式通常基于MediaQuery，通过获取设备屏幕尺寸信息，然后根据不同的屏幕尺寸设置不同的样式。这种方式虽然有效，但是代码冗余，且需要针对不同的屏幕尺寸编写大量的条件判断，维护起来非常麻烦。

极简全局适配方式

本文介绍的全局适配方式抛弃了繁琐的条件判断，采用了一种简单粗暴的实现方式。

思路：

该方式基于宽度方向自适应，高度滚动或留空。具体而言，就是将设计稿的宽度作为基准，然后根据设备屏幕宽度进行缩放。高度方向则根据内容自动滚动或留空。

实现：

import 'package:flutter/material.dart';

class GlobalAdapter extends StatelessWidget {
  final Widget child;
  final double baseWidth;

  const GlobalAdapter({
    Key? key,
    required this.child,
    this.baseWidth = 375,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double widthRatio = constraints.maxWidth / baseWidth;

        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(maxWidth: baseWidth),
            child: Transform.scale(
              scale: widthRatio,
              child: child,
            ),
          ),
        );
      },
    );
  }
}

使用方法：

使用该全局适配器非常简单，只需要将需要适配的Widget包裹在GlobalAdapter中即可。例如：

return GlobalAdapter(
  child: Scaffold(
    appBar: AppBar(
      title: Text('标题'),
    ),
    body: Center(
      child: Text('内容'),
    ),
  ),
);