Flutter屏幕适配插件responsive_size的使用

简介

responsive_size 是一个帮助在 Flutter 中创建响应式 UI 的包。

如何使用

首先，在 main.dart 文件中初始化 ResponsiveSize：

ResponsiveSize.init(designWidth: 414, designHeight: 896);

然后导入 responsive_size 包以使用其扩展功能：

import 'package:responsive_size/responsive_size.dart';

接下来，可以调用 .w（宽度）、.h（高度）、.sp（字体大小）：

return Container(
    width: 120.w, // 120 是设计稿中的宽度
    height: 240.h, // 240 是设计稿中的高度
    child: Text(
      'Hello world', 
      style: TextStyle(fontSize: 12.sp), // 12 是设计稿中的字体大小
    ), 
 );

或者也可以调用 getWidth（宽度）、getHeight（高度）、getSp（字体大小）：

return Container(
    width: getWidth(120), // 120 是设计稿中的宽度
    height: getHeight(240), // 240 是设计稿中的高度
    child: Text(
      'Hello world', 
      style: TextStyle(fontSize: getSp(12)), // 12 是设计稿中的字体大小
    ), 
 );

还可以直接使用块（blocks）：widthBlock（宽度）、heightBlock（高度）、spBlock（字体大小）：

return Container(
    width: widthBlock * 15, // widthBlock 表示屏幕宽度的 1%
    height: heightBlock * 30, // heightBlock 表示屏幕高度的 1%
    child: Text(
      'Hello world', 
      style: TextStyle(fontSize: spBlock * 1.1), // spBlock 表示默认字体大小的 100%
    ), 
 );

如何安装

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  responsive_size: ^版本号

然后运行以下命令安装依赖：

flutter pub get

示例代码

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

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

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

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

class ResponsiveScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化屏幕适配
    ResponsiveSize.init(designWidth: 414, designHeight: 896);

    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Size Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 120.w, // 使用 .w 方法
              height: 240.h, // 使用 .h 方法
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello World',
                  style: TextStyle(fontSize: 12.sp), // 使用 .sp 方法
                ),
              ),
            ),
            SizedBox(height: 20),
            Container(
              width: getWidth(120), // 使用 getWidth 方法
              height: getHeight(240), // 使用 getHeight 方法
              color: Colors.green,
              child: Center(
                child: Text(
                  'Hello World',
                  style: TextStyle(fontSize: getSp(12)), // 使用 getSp 方法
                ),
              ),
            ),
            SizedBox(height: 20),
            Container(
              width: widthBlock * 15, // 使用 widthBlock
              height: heightBlock * 30, // 使用 heightBlock
              color: Colors.red,
              child: Center(
                child: Text(
                  'Hello World',
                  style: TextStyle(fontSize: spBlock * 1.1), // 使用 spBlock
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}