Flutter自适应布局管理插件adaptive_layout

Flutter自适应布局管理插件adaptive_layout_manager的使用

Adaptive Layout Manager

Adaptive Layout Manager 是一个功能强大的 Flutter 包，旨在简化跨多个平台（移动端、Web、桌面等）创建响应式和自适应用户界面。它提供了处理屏幕大小、断点、字体缩放和自适应填充等功能。

特性

📱 响应式断点：轻松调整移动设备、平板和桌面屏幕的布局。
🧩 自适应小部件：
- <code>AdaptiveLayout</code>：根据屏幕大小切换布局。
- <code>AdaptiveText</code>：自动调整不同屏幕大小的字体大小。
- <code>AdaptivePadding</code>：基于屏幕大小动态应用填充。
- <code>AdaptiveGridView</code>：响应式的网格布局。
🖋 字体缩放：确保文本在不同平台上都清晰易读。
💻 跨平台支持：在 iOS、Android、Web、Windows、macOS 和 Linux 上无缝工作。

安装

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

dependencies:
  adaptive_layout_manager: ^1.0.0

然后运行 flutter pub get 来安装该包。

使用示例

以下是一个完整的示例代码，展示如何使用 adaptive_layout_manager 创建一个响应式布局。

示例代码

import 'package:adaptive_layout_manager/src/adaptive_layout.dart';
import 'package:adaptive_layout_manager/src/adaptive_text.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Layout Manager',
      home: Scaffold(
        appBar: AppBar(title: const Text('Adaptive Layout Example')),
        body: const AdaptiveLayout(
          // 小屏幕布局
          smallScreen: Center(child: AdaptiveText('Small Screen')),
          // 中等屏幕布局
          mediumScreen: Center(child: AdaptiveText('Medium Screen')),
          // 大屏幕布局
          largeScreen: Center(child: AdaptiveText('Large Screen')),
        ),
      ),
    );
  }
}

运行效果

当运行上述代码时，布局会根据屏幕大小自动切换内容。例如：

在小屏幕上显示 “Small Screen”。
在中等屏幕上显示 “Medium Screen”。
在大屏幕上显示 “Large Screen”。

安装

首先，你需要在 pubspec.yaml 文件中添加 adaptive_layout_manager 依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_layout_manager: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

adaptive_layout_manager 的核心是 AdaptiveLayout 组件，它允许你根据屏幕的宽度或高度来定义不同的布局。

1. 根据屏幕宽度定义布局

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Layout Example'),
      ),
      body: AdaptiveLayout(
        breakpoints: [
          Breakpoint(width: 600, layout: _buildMobileLayout),
          Breakpoint(width: 1200, layout: _buildTabletLayout),
          Breakpoint(width: double.infinity, layout: _buildDesktopLayout),
        ],
      ),
    );
  }

  Widget _buildMobileLayout(BuildContext context) {
    return Center(
      child: Text('Mobile Layout'),
    );
  }

  Widget _buildTabletLayout(BuildContext context) {
    return Center(
      child: Text('Tablet Layout'),
    );
  }

  Widget _buildDesktopLayout(BuildContext context) {
    return Center(
      child: Text('Desktop Layout'),
    );
  }
}

在这个例子中，AdaptiveLayout 根据屏幕宽度来选择不同的布局：

当屏幕宽度小于 600 时，显示移动端布局。
当屏幕宽度在 600 到 1200 之间时，显示平板布局。
当屏幕宽度大于 1200 时，显示桌面布局。

2. 根据屏幕高度定义布局

你也可以根据屏幕高度来定义布局：

AdaptiveLayout(
  breakpoints: [
    Breakpoint(height: 600, layout: _buildPortraitLayout),
    Breakpoint(height: 1200, layout: _buildLandscapeLayout),
  ],
)

3. 自定义布局逻辑

你还可以通过 builder 属性来自定义布局逻辑：

AdaptiveLayout(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return _buildMobileLayout(context);
    } else if (constraints.maxWidth < 1200) {
      return _buildTabletLayout(context);
    } else {
      return _buildDesktopLayout(context);
    }
  },
)

高级用法

adaptive_layout_manager 还支持更复杂的布局管理，例如根据设备方向、屏幕密度等来调整布局。

1. 根据设备方向调整布局

AdaptiveLayout(
  breakpoints: [
    Breakpoint(orientation: Orientation.portrait, layout: _buildPortraitLayout),
    Breakpoint(orientation: Orientation.landscape, layout: _buildLandscapeLayout),
  ],
)

2. 根据屏幕密度调整布局

AdaptiveLayout(
  breakpoints: [
    Breakpoint(pixelDensity: 2.0, layout: _buildHighDensityLayout),
    Breakpoint(pixelDensity: 1.0, layout: _buildNormalDensityLayout),
  ],
)

Flutter自适应布局管理插件adaptive_layout_manager的使用