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

在Flutter中，responsive_property 是一个受MaterialStateProperty启发的插件，它可以根据当前屏幕尺寸为你提供响应式的值。当内置的Material组件（如ElevatedButton）基于某些内部状态（悬停、按下、选中等）构建自身时，它们会调用MaterialProperty的resolve()方法并获取适当的值。此插件采用类似的接口，但状态现在变为屏幕范围。

大多数响应式包是在小部件级别实现的，但我们应该让任何东西都具有响应性，从单个整数到完整的Widget。

ScreenScope类

ScreenScope类非常类似于BoxConstraint，包含minWidth、maxWidth、minHeight和maxHeight，此外还包括orientation。这定义了你想要定位的屏幕范围。之所以命名为ScreenScope是因为未来我们可能会关心屏幕大小之外的其他属性。

有一些预定义的ScreenScope可以使用。如果你想针对三种屏幕类型：

mobileScreenScope (0px - 480px宽度)
tabletScreenScope (480px - 840px宽度)
desktopScreenScope (840px - 宽度)

mobilePortraitScreenScope (0px - 480px宽度，纵向)
tabletPortraitScreenScope (480px - 840px宽度，纵向)
desktopPortraitScreenScope (840px - 宽度，纵向)

mobileLandscapeScreenScope (0px - 840px宽度，横向)
tabletLandscapeScreenScope (840px - 1200px宽度，横向)
desktopLandscapeScreenScope (1200px - 宽度，横向)

以下是屏幕分类工作方式的简单演示：

如果你只想针对两种屏幕类型：

smallScreenScope (0px - 600px宽度)
bigScreenScope (600px - 宽度)

smallPortraitScreenScope (0px - 600px宽度，纵向)
bigPortraitScreenScope (600px - 宽度，纵向)

smallPortraitScreenScope (0px - 1000px宽度，横向)
bigPortraitScreenScope (1000px - 宽度，横向)

但是你可以根据自己的喜好定义ScreenScopes。

Responsive类

示例代码

var responsive = Responsive({
  mobileScreenScope: 2,
  tabletScreenScope: 4,
  desktopScreenScope: 6
});

然后你可以确定实际要使用的值：

int value = responsive.resolve(context);

内部，resolve方法会遍历映射表并选择最后一个有效的值。你还可以提供一个自定义函数：

T? combine(T? previousValue, T? element)

该函数将所有有效值组合成最终值（例如类似于CSS样式）。

响应式值示例

GridView.count(
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: Responsive({
    mobileScreenScope: 2,
    tabletScreenScope: 4,
    desktopScreenScope: 6
  }).resolve(context) ??
  6,
  children: List.generate(30,
    (index) => Container(color: Colors.green, child: Text("TAP ME"))),
  )

这会给你一个具有不同交叉轴计数的响应式GridView。移动设备：2，平板设备：4，桌面设备：6，甚至更宽的屏幕为8。

响应式小部件示例

你也可以直接为不同的屏幕尺寸构建不同的小部件。

Responsive({
    mobileScreenScope: mobileWidget,
    tabletScreenScope: tabletWidget,
    desktopScreenScope: desktopWidget,
  }).resolve(context) ??
  desktopWidget;

我还创建了一个名为ScreenBuilder的帮助小部件，可以节省你一些时间：

ScreenBuilder(
  mobile: mobile,
  tablet: tablet,
  desktop: desktop,
  );

ScreenBuilder.builder(
  mobileBuilder: mobileBuilder,
  tabletBuilder: tabletBuilder,
  desktopBuilder: desktopBuilder,
  )

后者有访问BuildContext的权限。

示例代码完整示例

以下是一个完整的示例代码，展示如何在Flutter应用中使用responsive_property插件。

import 'package:example/responsive_builder.dart';
import 'package:example/responsive_flex.dart';
import 'package:example/responsive_int.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Responsive Styled Widget"),
      ),
      body: Center(
          child: Container(
              width: 300,
              child: ListView(
                children: [
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Responsive Examples",
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ResponsiveIntPage()));
                      },
                      child: Text("Responsive Int")),
                  ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ResponsiveFlexPage()));
                      },
                      child: Text("Responsive Flex")),
                  ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ResponsiveBuilderPage()));
                      },
                      child: Text("Responsive Builder")),
                ],
              ))),
    );
  }
}