机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

响应式框架

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

响应性变得简单

响应式框架包括帮助开发者为移动设备、桌面和网站布局构建响应式应用的小部件。

演示

极简网站

使用响应式框架构建的演示网站。查看代码

Flutter 网站

使用 Flutter 重新创建的 flutter.dev 网站。查看代码

Pub.dev 网站

使用 Flutter 重新创建的 pub.dev 网站。查看代码

快速开始

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

将此库导入到你的项目中：

responsive_framework: ^latest_version

将 ResponsiveBreakpoints.builder 添加到你的 MaterialApp 或 CupertinoApp 中。定义你自己的断点和标签。

import 'package:responsive_framework/responsive_framework.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveBreakpoints.builder(
        child: child!,
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: 1920, name: DESKTOP),
          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
        ],
      ),
      initialRoute: "/",
    );
  }
}

使用你为布局和值定义的标签。

// Example: if the screen is bigger than the Mobile breakpoint, build full width AppBar icons and labels.
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE))
    FullWidthAppBarItems()

// Booleans
ResponsiveBreakpoints.of(context).isDesktop;
ResponsiveBreakpoints.of(context).isTablet;
ResponsiveBreakpoints.of(context).isMobile;
ResponsiveBreakpoints.of(context).isPhone;

// Conditionals
ResponsiveBreakpoints.of(context).equals(DESKTOP)
ResponsiveBreakpoints.of(context).largerThan(MOBILE)
ResponsiveBreakpoints.of(context).smallerThan(TABLET)
ResponsiveBreakpoints.of(context).between(MOBILE, TABLET)
...

自定义

您可以定义自己的断点标签，并在条件语句中使用它们。

例如，如果您正在构建 Material 3 导航栏，并且希望在有足够空间时将菜单扩展到全宽，您可以添加一个自定义 EXPAND_SIDE_PANEL 断点。

breakpoints: [
  ...
  const Breakpoint(start: 801, end: 1920, name: DESKTOP),
  const Breakpoint(start: 900, end: 900, name: 'EXPAND_SIDE_PANEL') <- Custom label.
  const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
  ...
]

然后，在你的代码中，根据断点条件显示 Rail。

expand: ResponsiveBreakpoints.of(context).largerThan('EXPAND_SIDE_PANEL')

响应式框架小部件

Responsive Framework 包含一些补充 Flutter 响应能力的自定义小部件。这些小部件的用法在演示项目中展示。

• ResponsiveValue
  • ResponsiveVisibility
  • ResponsiveConstraints
• ResponsiveRowColumn
• ResponsiveGridView
• ResponsiveScaledBox
• MaxWidthBox

旧版自述文件（v0.2.0及以下）

ResponsiveWrapper 迁移

v1.0.0 迁移指南

遗留 ReadMe 的其余部分仍然保留，因为这些概念仍然有用且被新小部件使用。ResponsiveWrapper 已弃用并移除。

问题

支持多种显示尺寸通常意味着需要多次重建相同的布局。在传统的 Bootstrap 方法下，构建响应式 UI 既耗时、令人沮丧又重复。此外，要做到像素完美几乎不可能，简单的编辑也需要几个小时。

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

解决方案

使用 Responsive Framework 自动缩放你的 UI。

ResponsiveBreakpoint.autoScale(600);

自动缩放

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

AutoScale 会按比例缩小和放大您的布局，保持 UI 的精确外观。
这消除了手动将布局适配到移动设备、平板电脑和桌面的需求。

ResponsiveBreakpoint.autoScale(600);

Flutter 的默认行为是调整大小，Responsive Framework 会遵守。AutoScale 默认关闭，可以通过将 autoScale 设置为 true 在断点处启用。

断点

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

断点控制不同屏幕尺寸下的响应行为。

ResponsiveWrapper(
    child,
    breakpoints: [
        ResponsiveBreakpoint.resize(600, name: MOBILE),
        ResponsiveBreakpoint.autoScale(800, name: TABLET),
        ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
    ],
)

断点让你能够对用户界面的显示进行精细控制。

入门概念

这些概念帮助你开始使用响应式框架，并快速构建响应式应用程序。

缩放与调整大小

Flutter 的默认行为是在屏幕尺寸变化时调整布局大小。调整布局大小会在无限制的宽度或高度方向上拉伸布局。任何受限的维度保持固定，这就是为什么移动应用的 UI 在桌面上看起来很小。以下示例说明了调整大小和缩放之间的区别。

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

AppBar 小部件在手机上看起来是正确的。然而，在桌面上查看时，AppBar 太矮，标题显得太小。
每种行为下会发生以下情况：

1. 调整大小（默认）——AppBar 的宽度为 double.infinity，因此它会拉伸以填充可用宽度。ToolBar 高度是固定的，保持为 56dp。
2. 缩放——AppBar 的宽度拉伸以填充可用宽度。高度根据最近的 ResponsiveBreakpoint 自动计算的纵横比按比例缩放。随着宽度增加，高度也按比例增加。

缩放后，AppBar 在桌面上看起来是正确的，但只在一定大小范围内有效。一旦屏幕变得太宽，AppBar 会开始显得过大。这就是断点的作用。

断点配置

为了适应各种不同的屏幕尺寸，请设置断点以控制响应式行为。

ResponsiveWrapper(
    child,
    maxWidth: 1200,
    minWidth: 480,
    defaultScale: true,
    breakpoints: [
        ResponsiveBreakpoint.resize(480, name: MOBILE),
        ResponsiveBreakpoint.autoScale(800, name: TABLET),
        ResponsiveBreakpoint.resize(1000, name: DESKTOP),
        ResponsiveBreakpoint.autoScale(2460, name: '4K'),
    ],
)

可以设置任意数量的断点。调整大小/缩放的行为可以混合使用。

• 低于 480：在小屏幕上调整大小以避免拥挤和溢出错误。
• 480-800：在手机上调整大小以适应原生控件尺寸。
• 800-1000：在平板上缩放以避免元素显得过小。
• 1000：在桌面上调整大小以利用可用空间。
• 2460：在超大 4K 显示器上缩放，以保持文本可读且控件间距不过大。

更多资源

Resocoder 教程

Resocoder 的出色团队创建了一个很棒的教程视频和文章，演示了在下面链接中使用响应式框架的方法。

查看响应式框架教程

项目维基

很遗憾，目前还没有项目 Wiki。这意味着这是一个机会，让你为最受欢迎的 Flutter 包之一创建和维护 Wiki。这个包需要你的文档帮助！

如果你感兴趣，请通过下面的联系链接与我们联系。

关于

响应式框架的创建源于对更好管理响应性的渴望。能够自动将用户界面适应不同的尺寸，开启了无限可能。在 Codelessly，我们正在构建 Flutter 应用 UI 和网站构建器、开发工具以及 UI 模板，以提高生产力。如果这听起来有趣，你会想订阅下面的更新 😎

响应式框架在 Zero-Clause BSD 许可证下发布，并以 Emailware 形式提供。如果你喜欢这个项目或者它对你有帮助，请订阅更新。虽然这不是必需的，但你可能会错过我们分享的精彩内容！

徽章 🏆

现在你可以自豪地展示使用响应式框架节省的时间和精力，同时佩戴支持者徽章。

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

> 📷 *原文此处有图片，请前往 GitHub 仓库查看完整内容。*

<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built Responsive"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20Responsive%20Badge.png"/>
</a>

<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built with Responsive Framework"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png"/>
</a>

许可证

BSD零条款许可证

版权所有 © 2024 Codelessly

特此许可在有无费用的情况下，为任何目的使用、复制、修改和/或分发此软件。

该软件按“原样”提供，作者对所有保证均不承担责任
关于本软件，包括所有默示的适销性保证
以及适用性。在任何情况下，作者都不应对任何特殊的、直接的责任负责，
间接或后果性损害或任何由此产生的损害
使用、数据或利润的损失，无论是在合同、过失或
其他侵权行为，由使用或与之相关而引起
本软件的性能。