Flutter适配工具插件sp_adapter的使用

sp_adapter 是一个用于 Flutter 的屏幕适配工具插件，它可以帮助开发者更方便地处理不同屏幕尺寸的适配问题。通过 sp_adapter，你可以根据设计稿的尺寸来设置 UI 元素的大小，从而在不同设备上保持一致的视觉效果。

安装 sp_adapter

首先，你需要在 pubspec.yaml 文件中添加 sp_adapter 依赖：

dependencies:
  flutter:
    sdk: flutter
  sp_adapter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

1. 初始化 sp_adapter

   在你的 main.dart 文件中初始化 sp_adapter。通常你需要在 runApp 之前进行初始化。

   import 'package:flutter/material.dart';
   import 'package:sp_adapter/sp_adapter.dart';
   
   void main() {
     // 初始化 sp_adapter
     SpAdapter.init(
       designSize: Size(375, 812), // 设计稿的尺寸
       allowFontScaling: false, // 是否允许字体根据系统设置缩放
     );
   
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(),
       );
     }
   }
   

2. 使用 sp_adapter 进行适配

   在布局中使用 SpAdapter 提供的工具方法来进行尺寸适配。

   class MyHomePage extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Flutter Demo Home Page'),
         ),
         body: Center(
           child: Container(
             width: SpAdapter.width(200), // 将设计稿中的 200px 转换为实际宽度
             height: SpAdapter.height(100), // 将设计稿中的 100px 转换为实际高度
             color: Colors.blue,
             child: Center(
               child: Text(
                 'Hello, Flutter!',
                 style: TextStyle(
                   fontSize: SpAdapter.fontSize(16), // 将设计稿中的 16px 字体转换为实际字体大小
                 ),
               ),
             ),
           ),
         ),
       );
     }
   }
   

常用方法

• SpAdapter.width(double width)：将设计稿中的宽度转换为实际宽度。
• SpAdapter.height(double height)：将设计稿中的高度转换为实际高度。
• SpAdapter.fontSize(double fontSize)：将设计稿中的字体大小转换为实际字体大小。
• SpAdapter.setWidth(double width)：设置设计稿的宽度。
• SpAdapter.setHeight(double height)：设置设计稿的高度。

注意事项

1. 设计稿尺寸：在初始化 SpAdapter 时，需要传入设计稿的尺寸。通常情况下，设计稿的宽度为 375 或 750（针对 iPhone 6/7/8 或 iPhone X/XS/11 Pro 等设备）。

2. 字体缩放：allowFontScaling 参数决定了是否允许字体大小根据系统设置进行缩放。如果设置为 true，字体大小会根据用户设备的系统字体缩放比例进行调整。

3. 横屏适配：如果需要处理横屏适配，可以在设备旋转时重新调用 SpAdapter.init 方法，或者根据屏幕方向动态调整适配逻辑。

示例

以下是一个完整的示例，展示了如何使用 sp_adapter 进行屏幕适配：

import 'package:flutter/material.dart';
import 'package:sp_adapter/sp_adapter.dart';

void main() {
  SpAdapter.init(
    designSize: Size(375, 812),
    allowFontScaling: false,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Container(
          width: SpAdapter.width(200),
          height: SpAdapter.height(100),
          color: Colors.blue,
          child: Center(
            child: Text(
              'Hello, Flutter!',
              style: TextStyle(
                fontSize: SpAdapter.fontSize(16),
              ),
            ),
          ),
        ),
      ),
    );
  }
}