Flutter屏幕适配插件responsive_s的使用

Flutter屏幕适配插件responsive_s的使用

介绍

responsive_s 是一个用于Flutter应用的屏幕适配插件，它可以帮助开发者根据不同的设备（如手机、平板、桌面）和屏幕方向（横屏或竖屏）来调整布局和元素的大小。通过这个插件，你可以轻松地为你的应用创建响应式的UI，确保在不同设备上都能有良好的用户体验。

主要功能

• fromPhysicalDimension：根据设备的实际宽度和高度来计算长度和其他值。
• fromRealDimension：根据设备的方向（横屏或竖屏）来计算实际的宽度和高度。
• forUnInitialDevices：为未初始化的设备设置默认值。
• 自动检测屏幕类型：插件会自动检测当前设备的屏幕类型（如手机、平板、桌面）。

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 responsive_s 依赖：

dependencies:
  flutter:
    sdk: flutter
  responsive_s: ^1.0.1

然后运行 flutter pub get 来安装依赖。

2. 示例代码

下面是一个完整的示例代码，展示了如何使用 responsive_s 插件来创建一个响应式的Flutter应用。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Responsive overview'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 Responsive 实例
    Responsive _responsive = new Responsive(context);

    // 创建一个包含3个圆形头像的列表
    List<Widget> _circularAvatar = List<Widget>.generate(
      3,
      (index) => CircleAvatar(
        // 根据设备类型动态调整头像的半径
        radius: _responsive.responsiveValue(
          forUnInitialDevices: 5,  // 默认值
          forDesktopScreen: 10,    // 桌面设备的值
          forPortraitMobileScreen: 5,  // 竖屏手机的值
        ),
      ),
    );

    // 创建一个红色背景的容器，显示当前屏幕类型
    Container _container = Container(
      color: Colors.red,
      child: Text(
        _responsive.screenType.toString(),  // 显示当前屏幕类型
        style: TextStyle(
          fontSize: _responsive.responsiveValue(forUnInitialDevices: 5),  // 动态调整字体大小
        ),
      ),
      width: _responsive.responsiveWidth(forUnInitialDevices: 80),  // 动态调整宽度
      height: _responsive.responsiveHeight(forUnInitialDevices: 60),  // 动态调整高度
    );

    // 定义移动设备的布局
    Widget _mobile = Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: _circularAvatar,  // 显示3个圆形头像
        ),
        _container,  // 显示红色容器
      ],
    );

    // 定义桌面设备的布局
    Widget _desktop = Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: _circularAvatar,  // 显示3个圆形头像
        ),
        SizedBox(width: _responsive.responsiveWidth(forUnInitialDevices: 2)),  // 动态调整间距
        _container,  // 显示红色容器
      ],
    );

    // 返回 Scaffold，根据设备类型选择不同的布局
    return Scaffold(
      appBar: AppBar(),
      body: _responsive.responsiveWidget(
        forUnInitialDevices: _desktop,  // 默认布局（桌面）
        forPortraitMobileScreen: _mobile,  // 竖屏手机布局
        forPortraitTabletScreen: _mobile,  // 竖屏平板布局
      ),
    );
  }
}