Flutter屏幕适配与响应式布局插件adaptive_responsive_util的使用

在 Flutter 中，屏幕适配和响应式布局是一个常见的需求，尤其是当应用需要在不同尺寸和分辨率的设备上运行时。adaptive_responsive_util 是一个可以帮助开发者实现屏幕适配和响应式布局的插件。以下是如何使用 adaptive_responsive_util 的基本指南。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  adaptive_responsive_util: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

基本用法

adaptive_responsive_util 提供了一些工具函数和类来帮助你实现屏幕适配和响应式布局。以下是几个基本的使用场景：

1. 获取屏幕尺寸

你可以使用 ScreenUtil 类来获取屏幕的宽度、高度等信息。

import 'package:adaptive_responsive_util/adaptive_responsive_util.dart';

double screenWidth = ScreenUtil.screenWidth;
double screenHeight = ScreenUtil.screenHeight;
double statusBarHeight = ScreenUtil.statusBarHeight;
double bottomBarHeight = ScreenUtil.bottomBarHeight;

2. 设置设计稿尺寸

通常，设计师会提供一个固定尺寸的设计稿（例如 375x812），你可以使用 ScreenUtil 来设置设计稿的尺寸，以便在不同的设备上进行适配。

ScreenUtil.init(
  designSize: Size(375, 812), // 设计稿的尺寸
  allowFontScaling: false,    // 是否允许字体缩放
);

3. 使用适配尺寸

在布局中，你可以使用 ScreenUtil 提供的 setWidth 和 setHeight 方法来设置控件的尺寸，以确保它们在不同设备上都能正确显示。

Container(
  width: ScreenUtil().setWidth(100), // 根据设计稿宽度适配
  height: ScreenUtil().setHeight(50), // 根据设计稿高度适配
  color: Colors.blue,
);

4. 适配字体大小

你可以使用 setSp 方法来适配字体大小。

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: ScreenUtil().setSp(16), // 根据设计稿字体大小适配
  ),
);

5. 响应式布局

adaptive_responsive_util 还提供了一些工具来实现响应式布局。例如，你可以使用 ResponsiveWidget 来根据屏幕宽度调整布局。

ResponsiveWidget(
  breakpoints: [
    Breakpoint(start: 0, end: 600, name: 'mobile'),
    Breakpoint(start: 601, end: 1200, name: 'tablet'),
    Breakpoint(start: 1201, end: double.infinity, name: 'desktop'),
  ],
  builder: (context, screenSize) {
    if (screenSize == 'mobile') {
      return MobileLayout();
    } else if (screenSize == 'tablet') {
      return TabletLayout();
    } else {
      return DesktopLayout();
    }
  },
);

示例代码

以下是一个完整的示例，展示了如何使用 adaptive_responsive_util 进行屏幕适配和响应式布局：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    ScreenUtil.init(
      designSize: Size(375, 812),
      allowFontScaling: false,
    );
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Responsive Util'),
      ),
      body: ResponsiveWidget(
        breakpoints: [
          Breakpoint(start: 0, end: 600, name: 'mobile'),
          Breakpoint(start: 601, end: 1200, name: 'tablet'),
          Breakpoint(start: 1201, end: double.infinity, name: 'desktop'),
        ],
        builder: (context, screenSize) {
          if (screenSize == 'mobile') {
            return MobileLayout();
          } else if (screenSize == 'tablet') {
            return TabletLayout();
          } else {
            return DesktopLayout();
          }
        },
      ),
    );
  }
}

class MobileLayout extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: ScreenUtil().setWidth(200),
        height: ScreenUtil().setHeight(100),
        color: Colors.blue,
        child: Center(
          child: Text(
            'Mobile Layout',
            style: TextStyle(
              fontSize: ScreenUtil().setSp(16),
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

class TabletLayout extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: ScreenUtil().setWidth(300),
        height: ScreenUtil().setHeight(150),
        color: Colors.green,
        child: Center(
          child: Text(
            'Tablet Layout',
            style: TextStyle(
              fontSize: ScreenUtil().setSp(20),
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

class DesktopLayout extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: ScreenUtil().setWidth(400),
        height: ScreenUtil().setHeight(200),
        color: Colors.red,
        child: Center(
          child: Text(
            'Desktop Layout',
            style: TextStyle(
              fontSize: ScreenUtil().setSp(24),
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}