Flutter屏幕适配插件responsive_flutter的使用

安装

首先，在你的 pubspec.yaml 文件中添加 responsive_flutter 作为依赖项。

dependencies:
  responsive_flutter: ^0.0.4

然后运行以下命令以更新依赖项：

flutter pub get

使用

基本用法

在 build 函数中传递上下文，并使用 ResponsiveFlutter.of(context) 来调用各种适配方法。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Flutter Demo'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          // 使用 scale 方法根据屏幕宽度缩放宽度
          width: ResponsiveFlutter.of(context).scale(120),
          // 使用 verticalScale 方法根据屏幕高度缩放高度
          height: ResponsiveFlutter.of(context).verticalScale(100),
          // 使用 moderateScale 方法根据屏幕尺寸适度缩放内边距
          padding: EdgeInsets.all(ResponsiveFlutter.of(context).moderateScale(8)),
          child: Text(
            "Responsive flutter",
            // 使用 fontSize 方法根据屏幕尺寸调整字体大小
            style: TextStyle(fontSize: ResponsiveFlutter.of(context).fontSize(3)),
          ),
        ),
      ),
    );
  }
}

函数详解

1. wp(double percentage)

返回屏幕宽度的百分比。

// 示例：获取屏幕宽度的20%
ResponsiveFlutter.of(context).wp(20)

2. hp(double percentage)

返回屏幕高度的百分比。

// 示例：获取屏幕高度的20%
ResponsiveFlutter.of(context).hp(20)

3. fontSize(double size)

返回占屏幕大小指定百分比的字体大小。

// 示例：设置字体大小为屏幕大小的3%
ResponsiveFlutter.of(context).fontSize(3)

4. scale(double size)

基于设备屏幕宽度线性缩放提供的尺寸。

// 示例：将尺寸按屏幕宽度线性缩放
ResponsiveFlutter.of(context).scale(10)

5. verticalScale(double size)

基于设备屏幕高度线性缩放提供的尺寸。

// 示例：将尺寸按屏幕高度线性缩放
ResponsiveFlutter.of(context).verticalScale(10)

6. moderateScale(double size, [double factor])

非线性缩放，允许控制缩放因子（默认为0.5）。

// 示例：适度缩放尺寸
ResponsiveFlutter.of(context).moderateScale(10) // 缩放因子默认为0.5
ResponsiveFlutter.of(context).moderateScale(10, 0.1) // 自定义缩放因子

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 中使用 responsive_flutter 插件进行屏幕适配。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Flutter Demo'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          // 使用 scale 方法根据屏幕宽度缩放宽度
          width: ResponsiveFlutter.of(context).scale(120),
          // 使用 verticalScale 方法根据屏幕高度缩放高度
          height: ResponsiveFlutter.of(context).verticalScale(100),
          // 使用 moderateScale 方法根据屏幕尺寸适度缩放内边距
          padding: EdgeInsets.all(ResponsiveFlutter.of(context).moderateScale(8)),
          child: Text(
            "Responsive flutter",
            // 使用 fontSize 方法根据屏幕尺寸调整字体大小
            style: TextStyle(fontSize: ResponsiveFlutter.of(context).fontSize(3)),
          ),
        ),
      ),
    );
  }
}