共计 3552 个字符，预计需要花费 9 分钟才能阅读完成。
在 Flutter 中创立响应式布局的 3 个形式
如果本文对你有帮忙，请转发让更多的敌人浏览。
译文 https://medium.easyread.co/3-…
最简略的办法，使您的应用程序响应所有屏幕大小 (挪动，平板电脑，桌面)。
我第一次应用“Flutter”框架的经验是开发一个物联网网络应用的挪动版本。所以基本上，在创立 UI 时，我不放心响应屏幕。这是因为我的应用程序只用于挪动设施。
然而在我的第三个我的项目中，我的老板要求我帮忙仓库中的流程实现无纸化。咱们心愿简化工人在监控货物进出仓库之前通常打印文件的过程。次要的要求是，仓库应用程序应该用在平板设施上。因而，这是我第一次学习在 flutter 应用程序中为更大的屏幕制作小部件。
在学习了一些资源之后，我决定开发一个实用于所有设施的应用程序。工作人员能够在手机上安装应用程序，也能够在仓库的桌面上关上应用程序。这里有 3 个选项，我曾经为你收集了如何在抖动应用程序响应布局。
三种形式:
- Dynamic Padding
- Layout Builder
- extension BuildContex
在 dartpad 上的演示: (如果你想先试试的话)
- https://dartpad.dev/?id=49078…
- https://dartpad.dev/?id=027bc…
- https://dartpad.dev/?id=59656…
- https://dartpad.dev/?id=925bb…
在这个博客中，咱们将摸索如何使你的应用程序布局适应你的屏幕的 3 个例子。好了，咱们开始吧..。
1. Dynamic Padding
你可能认为这是没有反馈的，但这是解决宽屏的解决方案之一。它通过向父窗口小部件增加程度填充来工作。将依据屏幕宽度动静设置填充值。让咱们看看上面的代码:
import 'package:flutter/material.dart';
class ResponsivePadding extends StatelessWidget {
final Widget child;
const ResponsivePadding({
Key? key,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(padding: MediaQuery.of(context).size.width > 650
? EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width / 3.8)
: const EdgeInsets.all(0),
child: child,
);
}
}您能够为下面的代码创立一个新的文件和类。而后在须要限度屏幕宽度时应用它。所有您须要做的就是用 ResponsivePaddingwidget 包装您的屏幕。
@override
Widget build(BuildContext context) {
return ResponsivePadding(child: Scaffold()
....https://dartpad.dev/?id=49078…
responsive padding
2. Layout Builder
LayoutBuilder: 构建一个小部件树，该树能够依赖于父小部件的大小。
顾名思义，此小部件将依据大小限度构建布局。与第一个不同的是，通过这种形式，咱们将捕捉所有可能的屏幕大小，而后安顿布局。假如咱们有 3 种布局: 手机、平板电脑和桌面。在每种布局中，咱们能够应用不同的小部件。我学习这种形式从 Youtube 的 Flutter 形式，你能够通过参考链接拜访视频。让咱们先看看响应代码。
在下面的代码中，咱们有一个 StatelessWidget 并返回一个 LayoutBuilder。如你所见，咱们有 3 个束缚宽度。您能够依据须要进行批改。
实例:
- 挪动布局: 因为宽度很小，我想在一个列中显示内容，所以我将向下滚动查看所有的内容
- 平板电脑: 屏幕比手机宽，我想组合行和列。
- 桌面: 对于桌面大小，我认为一行显示所有内容就足够了。我还扭转了每个孩子的宽度。
咱们能够像上面的代码那样应用它:
@override
Widget build(BuildContext context) {
return Responsive(
mobile: mobileWidget,
tablet: tabletWidget,
desktop: desktopWidget,
);
}https://dartpad.dev/?id=027bc…
layout builder
当初咱们有 3 个不同的布局取决于屏幕大小。您能够为每个布局创立自定义小部件。这样，当应用程序在你的手机、平板电脑或桌面上关上时，它们都有本人适当的外观。
3. Extension BuildContext
好吧，这是一个相当中等的程度，但十分体面，易于应用。因为咱们将应用一个来自 flutter 的扩大办法和一个通用函数。让咱们从定义开始。
泛型函数是用类型参数申明的函数。调用时，应用理论类型而不是类型参数。https://learn.microsoft.com/e…
对于泛型函数，咱们能够依据申明的类型应用函数。所以会更有生机。在 dartlang 中，当类型 <T> 申明一个类或函数时，咱们通常会遇到这种状况。
Dart 2.7 中引入的扩大办法是向现有库增加性能的一种办法 https://dart.dev/guides/langu…
当初咱们能够为以后框架创立新的函数。
咱们有 BuildContext。家喻户晓，BuildContext 解决小部件在小部件树中的地位。那么..。咱们将在所有的小部件树中有一个上下文。如果没有上下文，则不会出现小部件。
当初咱们将为 BuildContext 创立一个扩大办法来执行 Responsive 布局:
extension Responsive on BuildContext {
T responsive<T>(
T defaultVal, {
T? sm,
T? md,
T? lg,
T? xl,
}) {final wd = MediaQuery.of(this).size.width;
return wd >= 1280
? (xl ?? lg ?? md ?? sm ?? defaultVal)
: wd >= 1024
? (lg ?? md ?? sm ?? defaultVal)
: wd >= 768
? (md ?? sm ?? defaultVal)
: wd >= 640
? (sm ?? defaultVal)
: defaultVal;
}
}应用这段代码，咱们能够失去与 LayoutBuilder 雷同的后果，然而代码更简略。
@override
Widget build(BuildContext context) {
return Container(
child: context.responsive<Widget>(
mobileWidget, // default
md: tabletWidget, // medium
lg: desktopWidget, // large
),
);
}https://dartpad.dev/?id=59656…
正如我之前所说，这个办法是通用的，咱们能够定义一个函数来返回一个数字或者其余什么。让咱们试试上面的例子。咱们何时以及如何应用它。
另一个在“flutter”中应用网格视图的例子
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: context.responsive<int>(
2, // default
sm: 2, // small
md: 3, // medium
lg: 4, // large
xl: 5, // extra large screen
),
.......响应式网格视图响应式网格视图
https://dartpad.dev/?id=925bb…
好了，这是 3 种办法，使您的 Flutter 应用程序有一个响应布局。您能够依据须要更改断点值。
参考文献:
- https://www.youtube.com/watch…
- https://api.flutter.dev/flutt…
- https://dart.dev/guides/langu…
- https://twitter.com/millergod…
- https://api.flutter.dev/flutt…
如果本文对你有帮忙，请转发让更多的敌人浏览。
© 猫哥
- 微信 ducafecat
- https://wiki.ducafecat.tech
- https://video.ducafecat.tech
本文由 mdnice 多平台公布
