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

flutter_responsive 插件提供了一种简单且高效的方式来为Flutter应用程序创建响应式布局，适用于移动、桌面和Web平台。该插件允许你的布局根据父元素的大小自动调整和包裹小部件（如容器、行、列和富文本）。

关于插件

由Rafael Setragni为Flutter社区开发。

许可证

该项目遵循GNU通用公共许可证V3，这意味着你可以自由修改项目，但需要将改进分享回社区。要贡献改进，请先Fork此项目，进行必要的更改，然后提交Pull Request。别忘了在Issues页面上分享你的想法和需求。

重要说明

• 该插件基于Bootstrap Web Project，但尚未实现所有功能。
• 列的响应性基于全局屏幕尺寸，类似于Bootstrap的做法。
• 所有小部件包含边距、填充、宽度、高度（最大和最小边缘），类似于HTML中的div元素。

如何使用

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_responsive: ^0.0.6 # 请确保使用最新版本

然后在.dart文件中导入：

import 'package:flutter_responsive/flutter_responsive.dart';

可以自由使用ResponsiveContainer、ResponsiveRow、ResponsiveCol和JSX等小部件。

屏幕尺寸

该插件基于Bootstrap项目，将屏幕分为12列，并考虑了7种屏幕尺寸：

• US - 超小屏幕 - 0px至309px
• XS - 特小屏幕 - 310px至575px
• SM - 小屏幕 - 576px至767px
• MD - 中屏幕 - 768px至991px
• LG - 大屏幕 - 992px至1199px
• XL - 特大屏幕 - 1200px至1999px
• UL - 超大屏幕 - 2000px及以上

自定义限制（可选）

可以根据需要自定义所有限制，通过修改ResponsiveScreen类中的限制哈希映射：

/* Map<String, double> */
ResponsiveScreen.limits = {
    ScreenSize.us: 0.00,
    ScreenSize.xs: 310.00,
    ScreenSize.sm: 576.00,
    ScreenSize.md: 768.00,
    ScreenSize.lg: 992.00,
    ScreenSize.xl: 1200.00,
    ScreenSize.ul: 2000.00,
};

网格使用

该插件有三个主要网格元素：

ResponsiveContainer

用于容纳页面的所有元素，例如行和列，集中内容并限制最大宽度：

ResponsiveContainer(
  widthLimit: ResponsiveScreen.limits[ScreenSize.lg],
  margin: EdgeInsets.symmetric(horizontal: 10),
  children: <Widget>[
    ResponsiveRow(),
    ResponsiveRow(),
    ResponsiveRow(),
  ]
)

ResponsiveRow

包含多个列或其他小部件的容器。注意：不需要将内部小部件包装到ResponsiveCol对象中：

ResponsiveRow(
  margin: EdgeInsets.only(top: 20, bottom: 5),
  children: <Widget>[
    ResponsiveCol(),
    ResponsiveCol(),
    ResponsiveCol(),
    Text('可以直接在ResponsiveRow中使用其他小部件')
  ]
)

ResponsiveCol

示例代码如下：

ResponsiveCol(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(10),
  backgroundColor: Colors.blue,
  gridSizes: {
      ScreenSize.xs : 4,
      ScreenSize.sm : 3,
      ScreenSize.lg : 2,
      ScreenSize.xl : 1,
  },
  children: [
      Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
  ]
)

完整示例

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

class HomePage extends StatefulWidget {
  @override
  _HomePage createState() => _HomePage();
}

class _HomePage extends State<HomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> responsiveGridExample =
      List<int>.generate(12, (index) => index).map((colIndex) =>
          ResponsiveCol(
              padding: EdgeInsets.all(10),
              backgroundColor: Colors.blue,
              gridSizes: {
                ScreenSize.xs : 4,
                ScreenSize.sm : 3,
                ScreenSize.lg : 2,
                ScreenSize.xl : 1,
              },
              children: [
                Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
              ]
          )
      ).toList();

    MediaQueryData mediaQuery = MediaQuery.of(context);

    return Scaffold(
        appBar: AppBar(
          title: const Text('Home', overflow: TextOverflow.ellipsis),
        ),
        body: Container(
          color: Color(0xFFCCCCCC),
          child: ListView(
            children: <Widget>[
              ResponsiveContainer(
                margin: EdgeInsets.symmetric(vertical: 10),
                padding: EdgeInsets.symmetric(horizontal: 10),
                backgroundColor: Colors.white,
                widthLimit: mediaQuery.size.width * 0.95,
                children: <Widget>[
                  ResponsiveRow(
                    margin: EdgeInsets.symmetric(vertical: 10),
                    children: <Widget>[
                      ResponsiveCol(
                          padding: EdgeInsets.all(10),
                          margin: EdgeInsets.only(bottom: 20),
                          backgroundColor: Colors.blueGrey,
                          children: [
                            Text('Flutter Responsive Layout', style: JSXTypography.h4.merge(TextStyle(color: Colors.white)))
                          ]
                      ),
                    ]
                  ),
                  ResponsiveRow(
                    margin: EdgeInsets.symmetric(vertical: 10),
                    children: <Widget>[
                      ResponsiveCol(
                        children: [
                          JSX(
                            shrinkToFit: true,
                            padding: EdgeInsets.only(bottom: 20),
                            stylesheet: {
                              'h3': JSXStylesheet(
                                  textStyle: TextStyle(color: Theme.of(context).primaryColor),
                                  displayLine: DisplayLine.block
                              ),
                              'h6': JSXStylesheet(
                                  textStyle: TextStyle(color: Theme.of(context).primaryColor),
                                  displayLine: DisplayLine.block
                              )
                            },
                            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                            text: '''
<div>
<h3>Responsive Layouts</h3><h6>for <i>Flutter</i></h6>
<br><br>
<p>This <b>RichText</b> was easily produced and personalized using pure HTML</p>
<p>Bellow there is an example of 12 columns, wich changes the amount of each line depending of his father´s widget size.</p>
</div>''',
                          )
                        ]
                      )
                    ]..addAll(responsiveGridExample)
                  )
                ],
              )
            ],
          ),
        )
    );
  }
}

最终效果

如何运行插件示例

要运行完整示例应用，请按照以下步骤操作：

1. 使用GitHub Desktop或其他Git程序将此项目克隆到本地机器。
2. 下载Android Studio和最新的Flutter SDK到本地机器，并正确配置它们。
3. 运行flutter pub get更新所有依赖项。
4. 在模拟器或真实设备上调试example/lib/main.dart文件或位于test文件夹中的任何单元测试用例。
5. 若要正确运行性能测试，请使用flutter run --release运行应用。