Flutter插件cizer的介绍及使用_Cizer是一个帮助你构建响应式应用的Flutter包

Flutter插件cizer的介绍及使用_Cizer是一个帮助你构建响应式应用的Flutter包

帮助你构建响应式应用

Cizer 是一个帮助你构建响应式应用的 Flutter 包。这个包受到 Sizer 和 Bootstrap 的启发。

• 轻松构建响应式文本、高度和宽度
• 使用断点来简化响应式设计

Flutter插件cizer的安装

添加导入

在你想要使用 Cizer 的 Dart 文件中添加以下导入：

import 'package:cizer/cizer.dart';

包裹 MaterialApp

将 MaterialApp 包裹在 CizerApp 小部件中：

return CizerApp(
    builder: (ctx) => MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    )
);

自定义断点

Cizer 使用断点（类似于 Bootstrap）作为你的辅助工具，以决定在每个断点上显示什么内容。我们使用了三个断点，它们的默认值如下：

class BreakPoints {
  static const phone = 576.0;
  static const tablet = 992.0;
  static const maximum = 1400.0;
}

你可以在 CizerApp 初始化时自定义每个断点的值，如下所示：

return CizerApp(
    builder: (ctx) => MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    ),
    phoneBreakPoint: 500,
    tabletBreakPoint: 1000,
    maximumBreakPoint: 1500,
);

注意：最大断点用于 MaxWidthContainer

响应式辅助工具

• .h：当你希望小部件的高度/宽度相对于屏幕高度时使用。
• .w：当你希望小部件的高度/宽度相对于屏幕宽度时使用。
• .sp：文本大小相对于屏幕宽度。
• Cizer.isMobile：如果当前屏幕宽度处于移动断点，则返回 true。
• Cizer.isTablet：如果当前屏幕宽度处于平板断点，则返回 true。
• Cizer.isDesktop：如果当前屏幕宽度处于桌面断点，则返回 true。
• Cizer.screen：返回当前屏幕状态（移动、平板或桌面）。
• Cizer.break：中断应用程序。

如何使用Flutter插件cizer？

不高效的方式（避免使用 const 小部件）

使用 Cizer 最不推荐的方法是避免在任何使用 Cizer 的小部件（如 Cizer.isDesktop 或 .sp）中使用 const。不仅是在使用它的部件上，而且在所有父部件上也应避免使用。

为什么？

当一个部件被给定 const 时，Flutter 不会重建该部件，这会导致部件不会响应。

高效的方式（能够使用 const 小部件）

如果你选择为了性能而继续使用 const，那么 Cizer 提供了一个 ResponsiveLayout 小部件来包裹需要响应的小部件。当你使用 ResponsiveLayout 时，只有必要的部件会被重建，并且你仍然可以使用 const 小部件。

ResponsiveLayout

这是 ResponsiveLayout 的默认构造函数。你可以使用此类，当你在每个断点上显示完全不同的内容时。我们采用移动优先的原则，因此所需的唯一参数是移动体。

以下是使用 ResponsiveLayout 的示例：

return ResponsiveLayout(
  mobileBody: () => const Text("Mobile Body"),
  tabletBody: () => const Text("Tablet Body"),
  desktopBody: () => const Text("Desktop Body"),
);

还有一个替代构造函数 ResponsiveLayout.freeBuild。你可以使用它，如果你觉得默认构造函数过于复杂或会产生冗余代码。

假设你想在移动断点上改变文本颜色。如果你使用默认构造函数，它将如下所示：

return ResponsiveLayout(
  mobileBody: () => const Text(
      "Random Text", style: TextStyle(color: Colors.red)
  ),
  tabletBody: () => const Text(
      "Random Text" , style: TextStyle(color: Colors.blue)
  ),
  desktopBody: () => const Text("Random Text" , 
      style: TextStyle(color: Colors.blue)
  ),
);

使用 ResponsiveLayout.freeBuild 可以用更少的代码解决这个问题。以下是使用 ResponsiveLayout.freeBuild 构造函数时的使用方式：

return ResponsiveLayout.freeBuild(() =>
    Text("Random Text", 
      style: TextStyle(color: Cizer.isMobile ? Colors.red : Colors.blue)
    )
);