Flutter响应式设计插件responsive_ux的使用

Flutter响应式设计插件responsive_ux的使用

特性

• 实现了（Jetpack Compose）WindowSizeClass
• 实现了（Apple）UserInterfaceSizeClass
• 实现了（Material）WindowSizeClass
• 提供了BreakpointBuilder用于基于断点列表高效重建小部件

开始使用

在你的项目中添加 responsive_ux 插件：

dart pub add responsive_ux

使用方法

你可以通过以下方式使用 responsive_ux 插件。更多用法请参见 /example 文件夹。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WindowSizeConfiguration(
        data: WindowSizeConfigurationData(
          sizes: [WindowSizes.compact]
        ),
        child: BuilderScreen(),
      ),
    );
  }
}

示例代码

在示例代码中，我们展示了如何使用 responsive_ux 插件来创建一个响应式布局的小部件。

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

class BuilderScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return WindowSizedBox(
      builder: (context, width, height, child) {
        String w = "";
        String h = "";

        switch (width) {
          case WindowSizes.compact:
            w = "Compact";
            break;
          case WindowSizes.medium:
            w = "Medium";
            break;
          case WindowSizes.expanded:
            w = "Expanded";
            break;
        }

        switch (height) {
          case WindowSizes.compact:
            h = "Compact";
            break;
          case WindowSizes.medium:
            h = "Medium";
            break;
          case WindowSizes.expanded:
            h = "Expanded";
            break;
        }

        print(width.width);   // 输出匹配到的窗口宽度边界
        print(height.height); // 输出匹配到的窗口高度边界

        return Text("W: $w\nH: $h");
      },
    );
  }
}

额外信息

该包是在 Flutter 目前没有实现相应功能的情况下开发的。正如其名，我们欢迎任何想法和建议，并不限制该包的功能。所有改进都可以在 GitHub 上请求和贡献。

完整示例

完整的示例代码如下：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WindowSizeConfiguration(
        data: WindowSizeConfigurationData(
          sizes: [WindowSizes.compact]
        ),
        child: BuilderScreen(),
      ),
    );
  }
}

class BuilderScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return WindowSizedBox(
      builder: (context, width, height, child) {
        String w = "";
        String h = "";

        switch (width) {
          case WindowSizes.compact:
            w = "Compact";
            break;
          case WindowSizes.medium:
            w = "Medium";
            break;
          case WindowSizes.expanded:
            w = "Expanded";
            break;
        }

        switch (height) {
          case WindowSizes.compact:
            h = "Compact";
            break;
          case WindowSizes.medium:
            h = "Medium";
            break;
          case WindowSizes.expanded:
            h = "Expanded";
            break;
        }

        print(width.width);   // 输出匹配到的窗口宽度边界
        print(height.height); // 输出匹配到的窗口高度边界

        return Text("W: $w\nH: $h");
      },
    );
  }
}