Flutter屏幕适配插件screen_adapter的介绍

屏幕适配插件screen_adapter是一个基于flutter_screenutil开发的屏幕适配工具，主要用于Android和iOS平台。它的使用方式与flutter_screenutil基本一致。

screen_adapter使用方法

初始化

在应用启动时，只需进行一次初始化操作：

Future<void> main() async {
  // 初始化屏幕适配插件
  ScreenAdapter.init();

  runApp(const MyApp());
}

调用方式

在项目中，可以通过以下方式调用适配后的尺寸：

• 16.w 表示宽度为16的适配值。
• 16.r 表示字体大小为16的适配值。
• 16.h 表示高度为16的适配值。

具体的使用方法可以参考flutter_screenutil的官方文档。

完整示例代码

以下是一个完整的示例代码，展示了如何使用screen_adapter插件：

import 'dart:ui';

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

import 'package:flutter/services.dart';
import 'package:screen_adapter/screen_adapter.dart';
import 'package:screen_adapter_example/example.dart'; // 示例页面

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  const HomeWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  String _platformVersion = 'Unknown';
  double _devicePxRadio = 0;
  double _height = 0;
  double _width = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台状态初始化
  Future<void> initPlatformState() async {
    String platformVersion;
    double height;
    double width;
    double devicePxRadio;

    try {
      // 获取平台版本、设备像素比、物理宽度和高度
      platformVersion = await ScreenAdapter.getPlatformVersion() ?? 'Unknown platform version';
      devicePxRadio = await ScreenAdapter.getDevicePxRatio() ?? 0;
      width = await ScreenAdapter.getPhysicalWidth() ?? 0;
      height = await ScreenAdapter.getPhysicalHeight() ?? 0;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
      height = 0;
      width = 0;
      devicePxRadio = 0;
    }

    // 更新UI状态
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
      _height = height;
      _width = width;
      _devicePxRadio = devicePxRadio;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('screen_adapter 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示平台信息
            Text('运行环境: $_platformVersion\n'),
            Text('设备高度: $_height\n'),
            Text('设备宽度: $_width\n'),
            Text('设备像素比: $_devicePxRadio\n'),
            // 显示屏幕适配示例
            Text('宽度适配: ${16.w}'),
            Text('高度适配: ${16.h}'),
            Text('字体大小适配: ${16.r}'),
            ElevatedButton(
              onPressed: () {
                // 跳转到示例页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ExamplePage()),
                );
              },
              child: Text('查看示例'),
            ),
          ],
        ),
      ),
    );
  }
}

示例页面（ExamplePage）

class ExamplePage extends StatelessWidget {
  const ExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('宽度适配: ${200.w}'),
            Text('高度适配: ${100.h}'),
            Text('字体大小适配: ${20.r}'),
          ],
        ),
      ),
    );
  }
}