Flutter性能监控与优化插件xlerate的使用

xlerate

xlerate 是一个集合了多个在 pub.dev 上流行的包的功能的工具。

该包存在的三个主要原因：

1. 帮助快速进行UI开发。
2. 使Flutter中的小部件更容易使用。
3. 减少样板代码。

支持Android、iOS、Web、Mac、Linux和Windows平台。

特性（它可以做什么）

xlerate 包含许多有用的功能：

1. 根据屏幕大小处理UI布局。
2. 使用扩展功能轻松访问各种小部件。
3. 提供有用的预创建方法和小部件以获得好看的UI。
4. 提供响应式设计的小部件。
5. 提供有用的辅助方法以减少样板代码。

目录

• 响应式
• 响应式小部件
• 扩展功能
• 创建者
  • 容器
  • 文本
  • 装饰
  • 形状
• 应用程序组件
• 辅助方法

灵感

这个包受到一些顶级的 pub.dev 包的启发，包括 sizer 和 velocity_x。xlerate 的目标是将其他包中的几个有价值的部分合并在一起，进一步增强它们，并将它们统一在一个包中以便于快速和简单的UI创建。

使用

安装

你可以通过以下命令安装 xlerate：

$ flutter pub add xlerate

导入

在你的 dart 文件中导入：

import 'package:xlerate/xlerate.dart';

响应式

当为移动设备屏幕开发时，建议使用 initDevSize 方法，因为屏幕是固定的。

导入 [步骤 1]

import 'package:xlerate/size_config.dart';

初始化 initDevSize [步骤 2]

在第一个构建小部件中添加 SizeConfig.initDevSize(context) 函数：

Widget build(BuildContext context) {
    // 在这里添加 initDevSize 方法并贯穿整个应用使用它
    SizeConfig.initDevSize(context);
    // 如果您的应用仅使用 [num.ch()] 和 [num.cw()]，则无需初始化此函数。
    // 更多信息请参阅下方的 [注意]
    return MaterialApp(
      title: 'Xlerate',
      home: const HomePage(),
    );
}

参数 [步骤 3]

使用 [步骤 4]

SizedBox(
    // 这里我们给定屏幕高度的30%
    height: 30.h,
    // 这里我们给定屏幕宽度的31%
    width: 31.w,
),

// 或者可以这样使用

// 返回高度为30px的SizedBox
30.hbox;
// 返回宽度为30px的SizedBox
30.wbox;

Container(
    // 这里我们给定屏幕高度的20%
    height: 20.h,
    // 这里我们给定屏幕宽度的40%
    width: 40.w,
    child: your-child, // :)
);

这只是一个使用这些选项所能实现的很小的一部分示例。

当为flutter web创建时，请遵循以下步骤。由于web窗口是可调整大小的，我们可能需要根据窗口的调整大小来修改布局、字体大小或小部件的高度和宽度。

导入 [步骤 1]

import 'package:xlerate/size_config_web.dart';

参数 [步骤 2]

这里的 c 代表 current

使用 [步骤 3]

SizedBox(
    // 这里我们给定当前屏幕高度的30%
    height: 30.ch(context),
    // 这里我们给定当前屏幕宽度的31%
    width: 31.cw(context),
),

Container(
    // 这里我们给定当前屏幕高度的20%
    height: 20.ch(context),
    // 这里我们给定当前屏幕宽度的40%
    width: 40.cw(context),
    child: your-child, // :)
);

是否曾经发现自己希望按屏幕宽度和高度的特定百分比缩放小部件的高度或宽度，然后在达到指定像素值时停止？如果是这样，这些方法就是为你准备的。

响应式小部件

xlerate 的第二项最有用的功能是响应式小部件。

响应式小部件是 xlerate 包中的特殊成员，有助于UI开发。

ReactiveRowCol

完整示例在此

点击此处查看结果

ReactiveRowCol(
    // 使用 rowWhen 参数定义何时让小部件以行的形式显示
    rowWhen: (screenWidth) => (screenWidth > 500 && screenWidth < double.infinity),

    // 使用 colWhen 参数定义何时让小部件以列的形式显示

    colWhen: (screenWidth) => (screenWidth > 0 && screenWidth <= 500),

    // 使用 children 参数像平常一样添加小部件，并且可以使用 isRow 参数定义当布局为行形式时的特定小部件，以及当布局为列形式时的 isCol 参数。

    children: (isRow, isCol) => [
        // 响应式小部件...
        Container(
            height: 200,
            width: 30.w,
            color: Colors.red,
        ),
        isRow
            ? Container(
                height: 200,
                width: 30.w,
                color: Colors.green,
            )
            : Container(),
        Container(
            height: 200,
            width: 30.w,
            color: Colors.pink,
        ),
        // 响应式小部件...
    ],
);

ReactiveHome

完整示例在此

点击此处查看结果

ReactiveHome(
    // `pages` 参数在 `ReactiveHome` 小部件中用于定义将在响应式主屏幕中显示的页面列表。每个页面由一个 widget 表示，用户可以通过响应式导航栏在这之间导航。
    pages: [
        MyWidget1(),
        MyWidget2(),
        MyWidget3(),
    ],
    // `reactiveDestinations` 参数在 `ReactiveHome` 小部件中用于定义将在响应式导航栏或导航轨中显示的目的地列表。每个目的地由一个 `ReactiveDestination` 对象表示，其中包括标签和图标。这些目的地用于在 `ReactiveHome` 小部件中导航到不同的页面。
    reactiveDestinations: [
        ReactiveDestination(label: 'MyWidet1', icon: Icons.home),
        ReactiveDestination(label: 'MyWidet2', icon: Icons.home_filled),
        ReactiveDestination(label: 'MyWidet3', icon: Icons.home_outlined),
    ],
);

扩展功能

xlerate 的第三项最有用的功能是扩展功能。

上下文扩展

小部件扩展

数据类型扩展

创建者

xlerate 的第四项最有用的功能是创建者。

容器 [Box]

Box 是 Container 的全新创建者。

我相信你一定遇到过这个错误：

color == null || decoration == null
"Cannot provide both a color and a decoration\nTo provide both, use \"decoration: BoxDecoration(color: color)\"."

这是一个极其令人沮丧的错误，但如果你使用 Box 创建者，你就再也不用担心这个问题了。

但这并不是你使用 Box 的唯一原因，让我向你展示为什么它比 Container 更优越。

// 两者产生相同的结果。
// 但是 Box 使自定义小部件更加容易。

Container(
    height: 100,
    width: 100,
    color: Colors.amber,
    decoration: const BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.all(
            Radius.circular(20),
        ),
    ),
),

// 更流畅的链式方法。
Box().h(100).w(100).col(Colors.redAccent).curveCorners().create(),

文本

编写文本小部件现在变得更加容易，看看你可以这样做来创建Flutter中的文本小部件。

const Text('xlerate').txt.semibold.xxl.col(Colors.red).create();

// 必须在方法链结束时调用 create，因为只有这样文本小部件才会显示。

// 或者你可以这样做

'xlerate'.txt.semibold.xxl.col(Colors.red).create()

// `TextCreator` 类中还有许多其他酷炫的方法和获取器，探索它们吧。

使用 Text(data).txt... 当你知道数据是常量时，使用 'data'.txt... 当数据是变量时。

结果

装饰

使用 Decorate 类的 BoxDecoration。

Container(
    height: 30.h,
    width: 50.w,
    // 默认圆角半径为20并着色为红色
    decoration: Decorate.instance.curveAllCorners().col(Colors.red).create(),
),

11.hbox,

Container(
    height: 30.h,
    width: 50.w,
    decoration: Decorate.instance.col(Colors.green).create(),
),

结果

形状

使用 Shaper 类的 ShapeBorder。

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        // 使用 Shaper 类为第一个卡片小部件创建一个 RoundedRectangleBorder
        Card(
            // roundrectbrdr = RoundedRectangleBorder()
            // curvTL20 = 顶部左角圆角半径20
            // curvBR20 = 底部右角圆角半径20
            // 最后调用 create() 渲染
            shape: Shaper.roundrectbrdr.curvTL20.curvBR20.create(),
            child: const Text('xlerate').txt.xxxl.create().pLTRB(40, 10, 40, 10),
        ),
        // btw 这里 20.hbox = SizedBox(height: 20);
        20.hbox,
        // 使用 Shaper 类为第二个卡片小部件创建一个 StadiumBorder
        Card(
            // stadiumbrdr = StadiumBorder()
            shape: Shaper.stadiumbrdr.create(),
            // 查看 Text 文档了解这一点
            child: const Text('xlerate').txt.xxxl.create().pLTRB(40, 10, 40, 10),
        ),
    ],
);

结果

辅助方法

xlerate 的第六项最有用的功能是辅助方法。

圆角辅助方法帮助在容器上创建圆角边框

示例代码

以下是完整的示例代码：

import 'package:example/reactive_home_example.dart';
import 'package:flutter/material.dart';
import 'package:xlerate/size_config.dart';
import 'package:xlerate/xlerate.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在这里添加 initDevSize 方法并贯穿整个应用使用它
    SizeConfig.initDevSize(context);
    //
    return MaterialApp(
      title: 'Simple Sizer Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepOrange,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      home: const ReactiveHomeExample(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const MyText(text: 'Xlerate'),
      ),
      body: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Card(
                  child: SizedBox(
                    // 给定屏幕高度的30%
                    height: 30.h,
                    // 给定屏幕宽度的42%
                    width: 42.w,
                    child: const Center(
                      child: MyText(
                        text: 'Widget 1',
                      ),
                    ),
                  ),
                ),
                Card(
                  child: SizedBox(
                    height: 30.h,
                    width: 42.w,
                    child: const Center(
                      child: MyText(
                        text: 'Widget 2',
                      ),
                    ),
                  ),
                ),
              ],
            ),
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 8,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 0.5.h),
                  child: Card(
                    child: SizedBox(
                      height: 40.h,
                      width: double.infinity,
                      child: Center(child: MyText(text: 'Widget ${(index + 3)}')),
                    ),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({
    super.key,
    required this.text,
  });

  final String text;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(
        fontFamily: 'outfit',
      ),
    );
  }
}