在 Flutter 中创立呼应式布局的 3 个办法

假如本文对你有协助，请转发让更多的朋友阅览。

译文 medium.easyread.co/3-options-f…

最简单的办法，使您的应用程序呼应一切屏幕巨细(移动，平板电脑，桌面)。

我第一次运用“ Flutter”结构的经历是开发一个物联网网络应用的移动版本。所以基本上，在创立 UI 时，我不忧虑呼应屏幕。这是由于我的应用程序只用于移动设备。

可是在我的第三个项目中，我的老板要求我协助库房中的流程实现无纸化。咱们希望简化工人在监控货品进出库房之前一般打印文件的进程。主要的要求是，库房应用程序应该用在平板设备上。因而，这是我第一次学习在 flutter 应用程序中为更大的屏幕制作小部件。

在学习了一些资源之后，我决定开发一个适用于一切设备的应用程序。作业人员能够在手机上装置应用程序，也能够在库房的桌面上翻开应用程序。这里有 3 个选项，我已经为你收集了如安在颤抖应用程序呼应布局。

三种办法:

• Dynamic Padding
• Layout Builder
• extension BuildContex

在 dartpad 上的演示: (假如你想先试试的话)

• dartpad.dev/?id=49078a3…
• dartpad.dev/?id=027bc67…
• dartpad.dev/?id=59656d6…
• dartpad.dev/?id=925bbdc…

在这个博客中，咱们将探究如何使你的应用程序布局习惯你的屏幕的 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()
....

dartpad.dev/?id=49078a3…

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

dartpad.dev/?id=027bc67…

layout builder

现在咱们有 3 个不同的布局取决于屏幕巨细。您能够为每个布局创立自界说小部件。这样，当应用程序在你的手机、平板电脑或桌面上翻开时，它们都有自己适当的外观。

3. Extension BuildContext

好吧，这是一个相当中等的水平，但十分面子，易于运用。由于咱们将运用一个来自 flutter 的扩展办法和一个通用函数。让咱们从界说开始。

泛型函数是用类型参数声明的函数。调用时，运用实际类型而不是类型参数。 learn.microsoft.com/en-us/cpp/e…

关于泛型函数，咱们能够依据声明的类型运用函数。所以会更有活力。在 dartlang 中，当类型 声明一个类或函数时，咱们一般会遇到这种状况。

Dart 2.7 中引进的扩展办法是向现有库添加功能的一种办法 dart.dev/guides/lang…

现在咱们能够为当时结构创立新的函数。

咱们有 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
    ),
  );
}

dartpad.dev/?id=59656d6…

正如我之前所说，这个办法是通用的，咱们能够界说一个函数来回来一个数字或许其他什么。让咱们试试下面的比如。咱们何时以及如何运用它。

另一个在“ 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
    ),
.......

呼应式网格视图呼应式网格视图

dartpad.dev/?id=925bbdc…

好了，这是 3 种办法，使您的 Flutter 应用程序有一个呼应布局。您能够依据需求更改断点值。

参阅文献:

• www.youtube.com/watch?v=0mp…
• api.flutter.dev/flutter/wid…
• dart.dev/guides/lang…
• twitter.com/millergodev…
• api.flutter.dev/flutter/wid…

---

假如本文对你有协助，请转发让更多的朋友阅览。

猫哥