Flutter响应式布局插件responsive_units的使用

Flutter响应式布局插件responsive_units的使用

Responsive Units 是一个简单的 Flutter 包，旨在通过提供根据设备屏幕大小缩放的响应式单位来帮助开发响应式应用。

虽然在 pub 上存在一些其他实现来解决这个问题，但我在桌面端发现它们表现不佳，因此决定创建一个新的解决方案。

Demo

安装

在你的 pubspec.yaml 文件中添加 Responsive Units 作为依赖项：

dependencies:
  ...
  responsive_units: ^0.2.0

支持的单位

单位 描述
.w 宽度以像素为单位，计算为屏幕宽度的百分比。（例如：50.w 返回屏幕宽度的 50%）
.h 高度以像素为单位，计算为屏幕高度的百分比。（例如：50.h 返回屏幕高度的 50%）
.dg 对角线长度以像素为单位，计算为屏幕对角线的百分比。（例如：50.dg 返回屏幕对角线的 50%）
.sfw （安全）宽度以像素为单位，计算为不包括系统UI（如凹槽和状态栏）部分的屏幕宽度的百分比。（例如：50.sfw 返回屏幕安全宽度的 50%）
.sfh （安全）高度以像素为单位，计算为不包括系统UI（如凹槽和状态栏）部分的屏幕高度的百分比。（例如：50.sfh 返回屏幕安全高度的 50%）
.sfdg （安全）对角线长度以像素为单位，计算为不包括系统UI（如凹槽和状态栏）部分的屏幕对角线长度的百分比。（例如：50.sfdg 返回屏幕安全对角线的 50%）
.sp 返回可缩放的像素值，该值会根据用户选择的文本缩放因子进行缩放。
提示：将 .sp 连接到任何其他单位以使其与文本缩放因子一起缩放（例如：5.dg.sp 将同时根据对角线和文本缩放因子缩放）

使用方法

要开始使用响应式单位，只需在你的 WidgetsApp 中添加以下构建器参数：

MaterialApp(
  ...
  builder: (context, child) => AppSizer(
    child: child,
  ),
  ...
)

现在你可以在源代码中导入该包并使用这些响应式单位：

import 'package:responsive_units/responsive_units.dart';

最小示例

下面是一个最小示例，展示了如何使用这些响应式单位：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => AppSizer(
        child: child,
      ),
      home: const ResponsiveBox(),
    );
  }
}

class ResponsiveBox extends StatelessWidget {
  const ResponsiveBox({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.shade300,
      child: Center(
        child: Container(
          width: 50.w, // 屏幕宽度的50%
          height: 50.h, // 屏幕高度的50%
          color: Colors.lightGreen,
          child: Center(
            child: Text(
              "This box (and text) scales with the window size", // 文本内容
              style: Theme.of(context)
                  .textTheme
                  .headline4
                  ?.copyWith(fontSize: 4.dg.sp, color: Colors.black), // 设置字体大小为对角线长度的4%，并且根据文本缩放因子进行缩放
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter响应式布局插件responsive_units的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter响应式布局插件responsive_units的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，responsive_units 是一个用于创建响应式布局的插件。它允许你根据不同的屏幕尺寸和方向动态调整UI元素的尺寸和位置。这样可以确保你的应用在各种设备上都能够有良好的用户体验。

安装 responsive_units

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

dependencies:
  flutter:
    sdk: flutter
  responsive_units: ^1.0.0  # 请确保使用最新版本

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

基本用法

responsive_units 提供了一个 Context 扩展，使得你可以方便地在 build 方法中使用响应式单位。以下是一些常见的用法：

1. 使用 ResponsiveUnit 创建响应式尺寸

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Units Example'),
      ),
      body: Center(
        child: Container(
          width: context.responsiveUnit * 100, // 100% screen width
          height: context.responsiveUnit * 50, // 50% screen height
          color: Colors.blue,
          child: Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(
                fontSize: context.responsiveUnit * 5, // 5% screen width
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. 使用 ResponsiveUnit 创建响应式边距和填充

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Units Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(context.responsiveUnit * 2), // 2% screen width
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: context.responsiveUnit * 20, // 20% screen height
              color: Colors.red,
              child: Center(
                child: Text(
                  'Container 1',
                  style: TextStyle(
                    fontSize: context.responsiveUnit * 4, // 4% screen width
                  ),
                ),
              ),
            ),
            SizedBox(height: context.responsiveUnit * 2), // 2% screen height
            Container(
              width: double.infinity,
              height: context.responsiveUnit * 20, // 20% screen height
              color: Colors.green,
              child: Center(
                child: Text(
                  'Container 2',
                  style: TextStyle(
                    fontSize: context.responsiveUnit * 4, // 4% screen width
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用 ResponsiveUnit 创建响应式字体大小

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Responsive Units Example',
          style: TextStyle(
            fontSize: context.responsiveFontSize(20), // 基于屏幕尺寸的字体大小
          ),
        ),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: context.responsiveFontSize(16), // 基于屏幕尺寸的字体大小
          ),
        ),
      ),
    );
  }
}
回到顶部