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

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

responsive

构建状态 Pub 平台支持

为Flutter应用提供一种简单的方法来实现响应式UI，适用于移动设备、桌面和Web，允许每个屏幕尺寸和设备方向有不同的小部件大小。

该包由FlutterEs社区的Marvin Quevedo和Víctor Guardiola创建。如果您想加入我们，可以访问以下链接：

添加依赖

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

dependencies:
  responsive: 0.2.3

使用方法

您可以使用ResponsiveRow小部件和FlexResponsive小部件来构建布局，或者使用静态方法Responsive.calcColumns来为像GridView这样的小部件分配正确的列数。

简单使用

以下是一个简单的示例，展示了如何使用ResponsiveRow和FlexWidget来创建一个响应式布局：

import 'package:flutter/material.dart';
import 'package:responsive/flex_widget.dart';
import 'package:responsive/responsive_row.dart';

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

class MyApp extends StatelessWidget {
  // 这是您的应用的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '响应式示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            ResponsiveRow(
              columnsCount: 12,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: <Widget>[
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 4,
                  xsOffset: 2,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  xsLandOffset: 0,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.indigo,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.lime,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.teal,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.deepOrange,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.grey,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.black,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.brown,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.cyan,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

完整示例

以下是完整的示例代码，展示了如何使用responsive插件的不同功能：

import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride;
import 'package:flutter/material.dart';

import 'flexibe_row_demo.dart';
import 'responsive_galery.dart';
import 'responsive_gridview.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '响应式示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: <String, WidgetBuilder>{
        '/flexiwidget': (BuildContext context) => FlexibleRowDemo(),
        '/gallery': (BuildContext context) => ResponsiveGallery(),
        '/gridview': (BuildContext context) => ResponsiveGridview(),
      },
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('响应式演示应用'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/flexiwidget');
              },
              child: Text('Flexi Widget Demo'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/gallery');
              },
              child: Text('图像库演示'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/gridview');
              },
              child: Text('GridView演示'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter响应式布局插件responsive的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter响应式布局插件responsive的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，responsive 并不是一个官方提供的插件，但通常开发者们会提到响应式布局时，使用像 flutter_screenutil、responsive_framework 或者直接利用 LayoutBuilder 和 MediaQuery 来实现。不过，为了贴近你的要求，这里我假设你指的是一个假想的或社区提供的 responsive 插件，该插件旨在简化响应式布局的实现。

由于具体的 responsive 插件可能有所不同，我将提供一个基于常见响应式布局原则的示例，这个示例使用 flutter_screenutil 插件来模拟响应式布局的实现。flutter_screenutil 是一个流行的 Flutter 插件，它允许你根据屏幕尺寸来设置UI元素的大小。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: ^5.0.0+2  # 请检查最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中，你可以按照以下步骤使用 flutter_screenutil 来实现响应式布局：

  1. 初始化 ScreenUtil 在你的主应用入口（通常是 main.dart）中初始化 ScreenUtil：
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 设计稿基准尺寸
      builder: () => MaterialApp(
        home: HomePage(),
      ),
    );
  }
}
  1. 使用 ScreenUtil 进行布局 在你的页面或组件中，使用 ScreenUtil() 方法来设置响应式尺寸：
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScreenUtil().init(context); // 初始化 ScreenUtil 实例（可选，如果在ScreenUtilInit中已初始化则无需重复）

    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout Example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: ScreenUtil().setSp(24)), // 设置响应式字体大小
          ),
          SizedBox(height: ScreenUtil().setHeight(20)),
          Container(
            width: ScreenUtil().setWidth(300), // 设置响应式宽度
            height: ScreenUtil().setHeight(200), // 设置响应式高度
            color: Colors.blue,
            child: Center(
              child: Text(
                'Responsive Box',
                style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(18)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个例子中，ScreenUtil().setSp(double size) 方法用于设置与字体大小相关的响应式尺寸，而 ScreenUtil().setWidth(double size) 和 ScreenUtil().setHeight(double size) 方法则用于设置与屏幕宽度和高度相关的响应式尺寸。这些尺寸都是基于设计稿基准尺寸动态计算的。

请注意，虽然这个例子使用了 flutter_screenutil 插件，但如果你有一个具体的 responsive 插件，使用方式可能会有所不同。建议查阅该插件的官方文档或示例代码来获取更详细的使用指南。

回到顶部