Flutter UI定制插件flexi_ui的使用

概述

flexi_ui 是一个用于在Flutter中创建响应式UI的插件，解决了 screen_util 包在处理多个Figma设计（如小屏幕和大屏幕）时的不足。通过提供两个值来分别适应小屏和大屏，flexi_ui 可以自动计算并调整其他屏幕尺寸。

主要特性

• 响应式组件：根据屏幕大小自动调整组件尺寸。
• 自适应文本：动态调整文本大小。
• 设备特定布局：针对不同设备（如手机、平板、桌面）进行定制。
• 方向处理：无缝适应屏幕方向变化。
• 响应式卡片配置：轻松实现整个卡片组件的响应式设计。

快速入门

添加依赖

首先，在你的 pubspec.yaml 文件中添加 flexi_ui 依赖：

dependencies:
  flexi_ui: ^0.0.8

然后，在你的主 Dart 文件中导入该包：

import 'package:flexi_ui/flexi_ui.dart';

使用示例

初始化 ScreenAdaptiveConfig

在开始编写代码之前，请注意这个包完全依赖于屏幕大小的变化进行计算，因此不要在任何地方使用 const 关键字，除非是元组（Tuple）。以下是一个简单的初始化示例：

import 'package:flutter/material.dart';
import 'package:flexi_ui/flexi_ui.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return OrientationBuilder(
            builder: (context, orientation) {
              ScreenAdaptiveConfig.init(
                context: context,
                orientation: orientation,
                targetDevice: TargetDeviceType.phonePortrait, // 默认目标设备
              );
              return MaterialApp(
                debugShowCheckedModeBanner: false,
                home: HomeScreen(),
              );
            },
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: adaptiveText(),
      ),
    );
  }

  Widget adaptiveText() {
    return Text(
      "Adaptive Text",
      style: TextStyle(fontSize: const Tuple2(12, 40).aw),
    );
  }
}

响应式文本和组件

使用 Tuple2 提供两个值，第一个值表示小屏幕字体大小，第二个值表示大屏幕字体大小。使用 .aw 方法使字体大小响应不同的屏幕尺寸：

Widget adaptiveText() {
  return Text(
    "Adaptive Text",
    style: TextStyle(fontSize: const Tuple2(12, 40).aw),
  );
}

设备特定组件

根据设备类型显示不同的文本：

Widget deviceSpecificWidget() {
  return Center(
    child: ScreenAdaptiveConfig.instance!.isPhonePortrait
        ? const Text("Small Screen")
        : const Text("Large Screen"),
  );
}

自适应宽度和高度

使用 .w 和 .h 来设置基于屏幕宽度和高度的组件尺寸：

Widget halfScreenWidth() {
  return Container(
    width: 0.5.w,
    height: 40,
    color: Colors.red,
  );
}

Widget halfScreenHeight() {
  return Container(
    width: 400,
    height: 0.5.h,
    color: Colors.red,
  );
}

响应式卡片配置

如果你有一个包含多个子组件的卡片，可以使用 ResponsiveCardConfig。需要使用 LayoutBuilder 获取当前父容器的宽高，并传递目标宽高：

Widget responsiveCard() {
  return LayoutBuilder(
    builder: (context, constraints) {
      ResponsiveCardConfig().init(
        currentParentWidth: constraints.maxWidth,
        currentParentHeight: constraints.maxHeight,
        targetParentWidth: 300,
        targetParentHeight: 300,
      );
      return Container(
        color: Colors.lightBlue,
        width: const Tuple2(300, 800).aw,
        height: const Tuple2(300, 800).aw,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.blueAccent,
              width: 100.fw,
              height: 60.fh,
              child: Center(
                child: Container(
                  width: 30.fw,
                  height: 30.fw,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(30.fw),
                  ),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: Colors.orange,
                  width: 50.fw,
                  height: 30.fh,
                ),
                Container(
                  color: Colors.red,
                  width: 50.fw,
                  height: 30.fh,
                ),
              ],
            ),
          ],
        ),
      );
    },
  );
}

结论

flexi_ui 插件为Flutter开发者提供了强大的工具，使得创建响应式和自适应的UI变得更加简单和高效。你可以通过访问 GitHub 示例 查看更多示例代码，并在遇到问题或有建议时，通过 GitHub Issues 或 Pull Requests 进行反馈和贡献。