Flutter多功能集成插件multi_x的使用

提供一个简单的方法来创建响应式和自适应的Flutter多平台应用程序。

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  multi_x: any

功能

小部件

该包提供了以下小部件：

1. MxAdaptive - 一个可以在Flutter应用中启用屏幕适配和缩放的小部件。
2. MxAdaptiveNavigation - 一个可用于在整个应用中进行导航的小部件。在小屏幕上使用 NavigationBar，在大屏幕上使用 NavigationRail。
3. MxResponsive - 一个根据屏幕大小显示子小部件的小部件。
4. MxDevice - 一个根据设备窗口大小（移动设备或非移动设备）显示子小部件的小部件。
5. MxLayout - MxLayout 是一种带有额外功能的 LayoutBuilder。
6. MxPlatform - 一个根据平台（Android、iOS、桌面或Web）显示子小部件的小部件。
7. MxConditional - 一个如果条件为真则显示子小部件，否则显示另一个子小部件的小部件。
8. MxConditionalSwitch - 一个根据开关情况条件显示子小部件的小部件。

扩展

该包还提供了以下扩展方法：

1. mxColumns - 根据Material设计指南返回材料的列数。
2. mxGutter - 根据Material设计指南返回材料的间距。
3. mxDeviceType - 根据设备屏幕大小返回设备类型。
4. mxDeviceSize - 根据设备屏幕大小返回设备尺寸。
5. mxWindowSize - 根据Material设计断点返回当前窗口大小。
6. isMobileSize - 如果窗口大小为移动设备则返回 true。
7. mq - 返回 MediaQuery.of(context)。
8. screensize - 返回 MediaQuery.of(context).size。
9. devicePixelRatio - 返回 MediaQuery.of(context).devicePixelRatio。
10. screenPadding - 返回 MediaQuery.of(context).padding。
11. screenWidth - 返回 MediaQuery.of(context).size.width。
12. screenHeight - 返回 MediaQuery.of(context).size.height。
13. widthInPercent - 返回MQ宽度的百分比。
14. heightInPercent - 返回MQ高度的百分比。
15. safeAreaHorizontal - 返回安全区域水平填充。
16. safeAreaVertical - 返回安全区域垂直填充。
17. safeAreaWidthInPercent - 返回安全区域宽度的百分比。
18. safeAreaHeightInPercent - 返回安全区域高度的百分比。
19. heightTransformer() - 提供获取高度部分的功能。
20. widthTransformer() - 提供获取宽度部分的功能。
21. ratio() - 按给定值比例划分高度/宽度。
22. view - 返回提供 context 渲染到的 [FlutterView]。
23. maybeView - 返回提供 context 渲染到的 [FlutterView]。
24. orientation - 使用 MediaQuery 返回设备的方向。
25. isLandscape - 如果方向为横向则返回 true。
26. canShowNavigationRail - 如果方向为横向且宽度大于800则返回 true。

工具

该包还提供了以下工具：

1. Mx.isReleaseMode - 如果应用程序正在运行于发布模式则返回 true。
2. Mx.isDebugMode - 如果应用程序正在运行于调试模式则返回 true。
3. Mx.isProfileMode - 如果应用程序正在运行于分析模式则返回 true。
4. Mx.isWeb - 如果应用程序正在运行于Web则返回 true。
5. Mx.isDesktop - 如果应用程序正在运行于桌面则返回 true。
6. Mx.isMobileOS - 如果应用程序正在运行于移动设备则返回 true。
7. Mx.isAndroid - 如果应用程序正在运行于Android则返回 true。
8. Mx.isIOS - 如果应用程序正在运行于iOS则返回 true。
9. Mx.isMacOS - 如果应用程序正在运行于macOS则返回 true。
10. Mx.isWindows - 如果应用程序正在运行于Windows则返回 true。
11. Mx.isLinux - 如果应用程序正在运行于Linux则返回 true。
12. Mx.isFuchsia - 如果应用程序正在运行于Fuchsia则返回 true。
13. Mx.setPathUrlStrategy() - 为Web设置路径URL策略。
14. Mx.setHashUrlStrategy() - 为Web设置哈希URL策略。

### 完整示例Demo

```dart
import 'package:flutter/material.dart';
import 'package:multi_x/multi_x.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('multi_x Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 MxAdaptiveNavigation
              MxAdaptiveNavigation(
                smallScreen: NavigationBar(
                  destinations: [
                    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
                    NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
                  ],
                ),
                largeScreen: NavigationRail(
                  destinations: [
                    NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
                    NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Settings')),
                  ],
                ),
              ),
              SizedBox(height: 20),
              // 使用 MxResponsive
              MxResponsive(
                mobile: Text('This is Mobile'),
                tablet: Text('This is Tablet'),
                desktop: Text('This is Desktop'),
              ),
              SizedBox(height: 20),
              // 使用 MxPlatform
              MxPlatform(
                android: Text('This is Android'),
                ios: Text('This is iOS'),
                desktop: Text('This is Desktop'),
                web: Text('This is Web'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}