Flutter动态调整界面元素尺寸插件 resize 的使用

resize 是一个用于Flutter应用的简单响应式设计插件，它可以帮助开发者轻松实现不同设备上的自适应布局。以下是详细的使用指南和示例代码。

安装

首先，在项目的 pubspec.yaml 文件中添加 resize 依赖：

dependencies:
  ...
  resize: ${latest-version}
  ...

请确保将 ${latest-version} 替换为实际的最新版本号。

初始化

在 main.dart 中初始化 Resize 小部件，并将其作为根小部件包裹整个应用：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Resize(
      allowtextScaling: true,
      builder: () {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SafeArea(
            child: Scaffold(
              body: ListView(
                children: [
                  // 示例内容见下文
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

注意：每次使用与该包相关的功能时，请确保导入该包：

import 'package:resize/resize.dart';

设计尺寸

默认的设计尺寸为 Size(360, 690)。可以通过传递 size 参数来覆盖这个默认值：

return Resize(
  size: Size(480, 600), // 示例尺寸
  builder: () {
    // 应用代码
  },
);

关键参数

• .h: 响应式高度
• .w: 响应式宽度
• .vh: 屏幕高度百分比（类似于CSS）
• .vw: 屏幕宽度百分比（类似于CSS）
• .mv: 设备的最大视口大小
• .rem: 字体大小（类似于CSS），默认基准设置为16.0
• .sp: 响应式字体大小
• .r: 圆角边框半径

其他参数

• ResizeUtil().orientation: 获取设备的方向。
• ResizeUtil().deviceType: 获取设备类型（如手机、平板等）。
• ResizeUtil().screenHeight: 获取设备的高度。
• ResizeUtil().screenWidth: 获取设备的宽度。

支持的设备类型包括：Mobile, Tablet, Web, Windows, Mac, Linux, Fuchsia。

示例代码

以下是一个完整的示例，展示了如何使用 resize 插件创建响应式的Flutter应用：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Resize(
      allowtextScaling: true,
      builder: () {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SafeArea(
            child: Scaffold(
              body: ListView(
                children: [
                  SizedBox(height: 20.h),
                  Text(
                    "这是一个示例应用，展示如何使用resize包",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 1.15.rem),
                  ),
                  SizedBox(height: 20.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.network(
                        "https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
                        width: 90.vw,
                      ),
                    ],
                  ),
                  SizedBox(height: 30.h),
                  Text(
                    "这段文字的字体大小使用了sp单位，并且默认启用了缩放",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15.sp),
                  ),
                  SizedBox(height: 30.h),
                  Row(
                    children: [
                      Container(
                        width: 40.vw,
                        height: 20.vh,
                        color: Colors.red,
                      ),
                      SizedBox(width: 20.vw),
                      Container(
                        width: 40.vw,
                        height: 20.vh,
                        color: Colors.green,
                      ),
                    ],
                  ),
                  SizedBox(height: 30.h),
                  Center(
                    child: TextButton(
                      onPressed: () {},
                      style: TextButton.styleFrom(
                        backgroundColor: Color(0xFFFF5555),
                        primary: Colors.white,
                        elevation: 5.h,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.r),
                        ),
                      ),
                      child: Text(
                        "这是一个按钮",
                        style: TextStyle(fontSize: 13.sp),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

通过上述步骤和示例代码，您可以轻松地在Flutter项目中使用 resize 插件，以实现更加灵活和响应式的用户界面。如果遇到任何问题或有改进建议，欢迎在 GitHub 上提交问题或反馈。