Flutter响应式布局插件responsive_builder的使用

Flutter应用程序在不同设备（如手机、平板电脑、桌面和手表）上的显示效果可能需要根据屏幕尺寸和方向进行调整。responsive_builder插件提供了强大的工具来创建响应式的用户界面，使开发者能够轻松地为不同的设备类型和屏幕方向构建不同的布局。

一、简介

responsive_builder是一个帮助你创建可读性强且易于维护的响应式UI的包。它受到Responsive UI Flutter系列的启发，并提供了一系列用于处理屏幕大小变化的部件。

二、安装

要在项目中使用responsive_builder，首先需要将其添加到项目的pubspec.yaml文件中的dependencies部分：

dependencies:
  responsive_builder: ^latest_version # 请替换为最新版本号

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

三、基本用法

3.1 ResponsiveBuilder

ResponsiveBuilder是最基础也是最常用的组件之一。它允许你在构建函数中访问当前设备的信息（例如屏幕类型、屏幕尺寸等），从而根据这些信息动态地改变UI。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Responsive Layout')),
        body: ResponsiveBuilder(
          builder: (context, sizingInformation) {
            // 根据设备类型返回不同的布局
            if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
              return Container(color: Colors.blue);
            }

            if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
              return Container(color: Colors.red);
            }

            if (sizingInformation.deviceScreenType == DeviceScreenType.watch) {
              return Container(color: Colors.yellow);
            }

            return Container(color: Colors.purple); // 默认情况下的颜色
          },
        ),
      ),
    );
  }
}

这段代码会根据当前设备的类型返回不同颜色的容器。你可以通过调整窗口大小或切换设备模拟器来查看效果。

3.2 OrientationLayoutBuilder

有时候我们还需要考虑横竖屏的情况，这时可以使用OrientationLayoutBuilder。这个组件允许你为每种方向指定不同的布局。

OrientationLayoutBuilder(
  portrait: (context) => Container(color: Colors.green),
  landscape: (context) => Container(color: Colors.pink),
)

此外，还可以通过设置mode属性强制应用保持特定的方向：

OrientationLayoutBuilder(
  mode: info.isMobile ? OrientationLayoutBuilderMode.portrait : OrientationLayoutBuilderMode.auto,
  ...
)

3.3 ScreenTypeLayout

如果你希望直接为不同类型的屏幕定义完整的布局而不需要每次都检查条件，那么可以使用ScreenTypeLayout。它可以接收四个参数分别对应移动设备、平板电脑、桌面端以及手表上的布局。

ScreenTypeLayout(
  mobile: () => Container(color: Colors.blue),
  tablet: () => Container(color: Colors.yellow),
  desktop: () => Container(color: Colors.red),
  watch: () => Container(color: Colors.purple),
)

或者使用.builder方法只在需要时创建相应的布局：

ScreenTypeLayout.builder(
  mobile: (_) => Container(color: Colors.blue),
  tablet: (_) => Container(color: Colors.yellow),
  desktop: (_) => Container(color: Colors.red),
  watch: (_) => Container(color: Colors.purple),
)

3.4 自定义断点

默认情况下，responsive_builder已经预设了一些常见的断点值，但你也可以根据自己的需求自定义它们：

ScreenTypeLayout(
  breakpoints: ScreenBreakpoints(
    tablet: 600,
    desktop: 950,
    watch: 300
  ),
  ...
)

甚至可以在全局范围内设置一次性的断点配置：

void main() {
  ResponsiveSizingConfig.instance.setCustomBreakpoints(
    ScreenBreakpoints(desktop: 800, tablet: 550, watch: 200),
  );
  runApp(MyApp());
}

3.5 屏幕类型特定值

当只需要更改某些元素的属性而不必完全重写整个UI时，可以利用getValueForScreenType<T>()函数。比如要根据不同设备调整内边距：

Container(
  padding: EdgeInsets.all(getValueForScreenType<double>(
    context: context,
    mobile: 10,
    tablet: 30,
    desktop: 60,
  )),
  child: Text('Best Responsive Package'),
)

3.6 响应式尺寸

对于那些基于屏幕宽度或高度来调整大小的需求，responsive_builder也提供了扩展方法。只需将你的MaterialApp包裹在一个ResponsiveApp里即可使用这些特性：

ResponsiveApp(
  builder: (context) => MaterialApp(
    title: 'Flutter Demo',
    home: HomeView(),
  ),
)

之后就可以像下面这样轻松实现响应式尺寸了：

SizedBox(height: 30.screenHeight); // 或者使用.sh作为简写形式
Text('respond to width', style: TextStyle(fontSize: 10.sw));

以上就是关于responsive_builder的一些主要特性和使用方法。通过合理运用这些功能，可以使我们的Flutter应用更好地适配各种终端设备，提升用户体验。