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) ... |

相关推荐
problc8 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人17 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人20 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile1 天前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓