Flutter 响应式框架

一、简介

响应式框架会自动使用户界面适应不同的屏幕大小。创建你的用户界面一次,让它显示完美的像素在移动,平板电脑和桌面!

1.1 问题

支持多种显示尺寸通常意味着要多次重新创建同一布局。在传统的Bootstrap方法下,构建响应式UI非常耗时、令人沮丧和重复。

此外,要使一切像素完美几乎是不可能的,简单的编辑需要几个小时。

1.2 解决方案

使用响应式框架自动扩展UI。

|----------------------------------------------|
| ResponsiveBreakpoint.autoScale(600); |

二、快速开始

2.1 导人依赖

将此库导入项目:

|-----------------------------------------------|
| responsive_framework: ^latest_version |

2.2 添加额外代码至App中

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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: "/", ); } } |

2.3 AutoScale

自动缩放按比例缩小和扩展布局,保持用户界面的精确外观。这样就不需要手动调整布局以适应移动设备、平板电脑和桌面。

Flutter的默认行为是调整响应框架的大小。自动缩放在默认情况下是关闭的,可以通过将autoScale设置为true在断点处启用。

|----------------------------------------------|
| ResponsiveBreakpoint.autoScale(600); |

2.4 Breakpoints

断点控制不同屏幕大小的响应行为。

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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:在手机上调整大小以适应本机widget的大小。
  • 800-1000:在平板电脑上缩放以避免元素看起来太小。
  • 1000+:在桌面上调整大小以使用可用空间。
  • 2460+:在超大4K显示屏上缩放,这样文本仍然清晰可见,小部件之间的间距不会太大。

2.5 缩放与调整大小

Flutter的默认行为是在屏幕尺寸改变时调整布局大小。调整布局的大小会将其沿不受限制的宽度或高度方向拉伸。

任何受限维度都是固定不变的,这就是为什么移动应用程序UI在桌面上看起来很小。

以下是每种行为下发生的情况:

  1. 调整大小(默认)- AppBar的宽度是double.infinity,因此它会拉伸以填充可用的宽度。工具栏高度固定,保持56dp。
  2. 缩放 - AppBar的宽度将延伸以填充可用的宽度。高度按比例缩放,使用从最近的ResponsiveBreakpoint自动计算的纵横比。随着宽度的增加,高度成比例地增加。

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

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| //如果屏幕大于Mobile断点,则构建全宽AppBar图标和标签。 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) ... |

相关推荐
火柴就是我15 小时前
flutter 之真手势冲突处理
android·flutter
Speed12315 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间15 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭15 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone16 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter