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

发布于 1周前 作者 songsunli 来自 Flutter

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

🎯 特性

  • 易于实现。
  • 根据设备屏幕自动调整。
  • 在大屏幕和网页开发中将您的内容包裹在一个框内。
  • 对移动应用具有响应性。
  • 完全可定制。

💾 安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  responsive_wrap_container: <最新版本>

现在在 Dart 代码中导入它：

import 'package:responsive_wrap_container/responsive_wrap_container.dart';

📦 使用

ResponsiveContainer(
    child: Text("This is Awesome!!!"),
)

🎨 自定义

ResponsiveContainer(
    // 最大断点宽度，超过此宽度会触发自适应
    maxWidth: 600,
    // 指定固定高度（默认为全屏高度）
    // 可以设置为 Height.wrap 或 Height.fullScreen 或一个固定值
    height: 170,
    // 强制容器高度适应内容高度
    wrapHeight: true,
    
    // 主容器（包含内容的框）的颜色
    colorContainer: Colors.black,
    // 当屏幕宽度超过 maxWidth 值时出现的背景颜色
    colorBackground: Colors.blueGrey,
    
    child: Text("This is Awesome!!!"),
)

🧱 参数

名称 描述 数据类型 默认值 是否必需
child 您的内容 Widget - 是
maxWidth 响应式容器的最大断点宽度 double 600 否
height 指定固定高度（默认为全屏高度）。可以设置为 Height.wrap 或 Height.fullScreen 或一个固定值 double Height.fullScreen 否
wrapHeight 强制容器高度适应内容高度 bool true 否
colorContainer 主容器（包含内容的框）的颜色 Color white 否
colorBackground 当屏幕宽度超过 maxWidth 值时出现的背景颜色 Color grey 否

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,

        // 主题
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        ),

        // 主页
        home: const HomePage()
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {

    return const Scaffold(
      body: ResponsiveContainer(
        // 最大断点宽度，超过此宽度会触发自适应
        maxWidth: 600,
        // 指定固定高度（默认为全屏高度）
        height: 170,
        // 强制容器高度适应内容高度
        wrapHeight: true,

        // 主容器（包含内容的框）的颜色
        colorContainer: Colors.black,
        // 当屏幕宽度超过 maxWidth 值时出现的背景颜色
        colorBackground: Colors.blueGrey,

        child: Text("This is Awesome!!!"),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter中的responsive_wrap_container插件来实现响应式布局的示例代码。这个插件允许你根据屏幕尺寸和方向自动调整子组件的布局。

首先，确保你已经在pubspec.yaml文件中添加了responsive_wrap依赖：

dependencies:
  flutter:
    sdk: flutter
  responsive_wrap: ^0.2.0  # 请检查最新版本号

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

接下来是一个示例代码，展示了如何使用ResponsiveWrap来创建一个响应式布局：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Wrap Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResponsiveWrapScreen(),
    );
  }
}

class ResponsiveWrapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Wrap Container Demo'),
      ),
      body: Center(
        child: ResponsiveWrap(
          spacing: 8.0,  // 子组件之间的间距
          runSpacing: 8.0,  // 行之间的间距
          crossAxisAlignment: WrapCrossAlignment.center,  // 交叉轴对齐方式
          children: <Widget>[
            for (int i = 0; i < 12; i++)
              Container(
                color: Colors.primaries[i % Colors.primaries.length],
                child: Center(
                  child: Text(
                    'Item $i',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                width: 100,  // 固定宽度，但高度会根据内容自适应
                height: 100,  // 固定高度，但宽度会根据内容自适应（在这里是固定的）
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了responsive_wrap包。
  2. 创建了一个MyApp作为应用的根widget。
  3. 在ResponsiveWrapScreen中，我们使用了ResponsiveWrap组件来包裹我们的子组件（这里是12个彩色的方块）。
  4. ResponsiveWrap的参数包括子组件之间的间距spacing、行之间的间距runSpacing，以及交叉轴对齐方式crossAxisAlignment。
  5. 子组件是固定宽度和高度的Container，每个容器中包含一个居中的文本。

这个示例展示了如何使用ResponsiveWrap来创建一个简单的响应式布局。当屏幕尺寸或方向变化时，ResponsiveWrap会自动调整子组件的布局，以确保它们适应新的屏幕尺寸和方向。

回到顶部