Flutter布局插件layoutry的使用

安装

请参阅官方安装指南：layoutry安装

使用与概述

Layoutry 是对 LayoutBuilder 的一种修改实现，使得我们可以通过其 LayoutInfo 来轻松捕获设备类型（通过屏幕尺寸）。 其中，LayoutDevice 是一个自定义的 Platform.operatingSystem 实现枚举，用于通过屏幕尺寸标记当前设备类型。

以下是代码示例：

Layoutry(
  builder: (context, info) {
    // 手动定义的设备类型到颜色映射。
    final colors = <LayoutDevice, Color>{
      LayoutDevice.mobile: Colors.blue,
      LayoutDevice.tablet: Colors.red,
      LayoutDevice.web: Colors.green,
    };

    return AnimatedContainer(
      duration: const Duration(milliseconds: 500),
      // 颜色将从 [colors] 中生成，
      // 并根据设备的屏幕尺寸进行监听。
      color: colors[info.device],
      child: Center(child: Builder(builder: (context) {
        // 如果设备的屏幕尺寸像移动设备：
        // 屏幕上会显示 "Hi Mobile"。
        if (info.device.isMobile()) {
          return const Text(
            'Hi Mobile',
            style: TextStyle(color: Colors.white, fontSize: 20),
          );
        }

        // 如果设备的屏幕尺寸像网页：
        // 屏幕上会显示 "Hi Web"。
        if (info.device.isWeb()) {
          return const Text(
            'Hi Web',
            style: TextStyle(color: Colors.white, fontSize: 20),
          );
        }

        // 在其他情况下：屏幕上会显示当前设备类型。
        return Text(
          'Hi ${info.device.toString()}',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        );
      })),
    );
  },
)

示例代码

在 example/main.dart 文件中：

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

void main() => runApp(const App());

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

  [@override](/user/override)
  Widget build(BuildContext context) => const MaterialApp(home: Home());
}

// 查看概述：
// https://user-images.githubusercontent.com/59066341/211651068-27f5ca62-4d0d-44fa-b87d-7924605c017c.gif
class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Layoutry(
        builder: (context, info) {
          // 手动定义的设备类型到颜色映射。
          final colors = <LayoutDevice, Color>{
            LayoutDevice.mobile: Colors.blue,
            LayoutDevice.tablet: Colors.red,
            LayoutDevice.web: Colors.green,
          };

          return AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            // 颜色将从 [colors] 中生成，
            // 并根据设备的屏幕尺寸进行监听。
            color: colors[info.device],
            child: Center(child: Builder(builder: (context) {
              // 如果设备的屏幕尺寸像移动设备：
              // 屏幕上会显示 "Hi Mobile"。
              if (info.device.isMobile()) {
                return const Text(
                  'Hi Mobile',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                );
              }

              // 如果设备的屏幕尺寸像网页：
              // 屏幕上会显示 "Hi Web"。
              if (info.device.isWeb()) {
                return const Text(
                  'Hi Web',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                );
              }

              // 在其他情况下：屏幕上会显示当前设备类型。
              return Text(
                'Hi ${info.device.toString()}',
                style: const TextStyle(color: Colors.white, fontSize: 20),
              );
            })),
          );
        },
      ),
    );
  }
}