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

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

flex_responsive

一个强大而简单的Flutter包，用于在移动、平板和桌面平台上创建响应式布局，只需少量代码。

特性 🚀

• 简单的屏幕检测
  • 简单的移动/平板/桌面检查
  • 自动断点处理
  • 屏幕尺寸工具
• 响应式布局
  • 不同屏幕尺寸的不同布局
  • 平滑的布局转换
  • 自动内容调整
• 响应式网格
  • 自动列调整
  • 可自定义间距
  • 流体项目大小

安装 📦

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

dependencies:
  flex_responsive: ^0.0.1

使用 💻

基本用法

导入包：

import 'package:flex_responsive/flex_responsive.dart';

1. 响应式布局

为不同的屏幕尺寸创建不同的布局：

FlexResponsiveLayout(
  // 移动端布局（必需）
  mobile: SingleChildScrollView(
    child: Column(
      children: [
        Text('Mobile View'), // 移动端内容
      ],
    ),
  ),

  // 平板布局（可选）
  tablet: Row(
    children: [
      Drawer(child: Text('Sidebar')), // 侧边栏
      Expanded(
        child: Text('Tablet Content'), // 平板内容
      ),
    ],
  ),

  // 桌面布局（可选）
  desktop: Row(
    children: [
      Drawer(child: Text('Sidebar')), // 侧边栏
      Expanded(
        child: Text('Desktop Content'), // 桌面内容
      ),
    ],
  ),
)

2. 响应式网格

创建自动调整列数的网格：

FlexResponsiveGrid(
  spacing: 16, // 可选：项目之间的间距
  children: [
    Card(child: Text('Item 1')), // 项目1
    Card(child: Text('Item 2')), // 项目2
    Card(child: Text('Item 3')), // 项目3
    // 添加更多项目
  ],
)

3. 屏幕尺寸检测

检查当前屏幕尺寸：

if (FlexResponsive.isMobile(context)) {
  // 移动端特定代码
}

if (FlexResponsive.isTablet(context)) {
  // 平板特定代码
}

if (FlexResponsive.isDesktop(context)) {
  // 桌面特定代码
}

完整示例 📱

以下是展示所有特性的完整示例：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Demo'), // 标题
      ),
      body: FlexResponsiveLayout(
        // 移动端布局
        mobile: SingleChildScrollView(
          child: Column(
            children: [
              const Text('Mobile Dashboard'), // 移动端仪表盘
              FlexResponsiveGrid(
                children: _buildGridItems(), // 网格项目
              ),
            ],
          ),
        ),

        // 平板布局
        tablet: Row(
          children: [
            Drawer(
              child: ListView(
                children: [
                  const DrawerHeader(
                    child: Text('Menu'), // 菜单
                  ),
                  ListTile(
                    title: const Text('Home'), // 首页
                    onTap: () {},
                  ),
                ],
              ),
            ),
            Expanded(
              child: FlexResponsiveGrid(
                children: _buildGridItems(), // 网格项目
              ),
            ),
          ],
        ),

        // 桌面布局
        desktop: Row(
          children: [
            Drawer(
              child: ListView(
                children: [
                  const DrawerHeader(
                    child: Text('Menu'), // 菜单
                  ),
                  ListTile(
                    title: const Text('Home'), // 首页
                    onTap: () {},
                  ),
                ],
              ),
            ),
            Expanded(
              child: FlexResponsiveGrid(
                children: _buildGridItems(), // 网格项目
              ),
            ),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildGridItems() {
    return List.generate(
      6,
      (index) => Card(
        child: Padding(
          padding: const EdgeInsets.all(16), // 内边距
          child: Column(
            children: [
              Icon(Icons.star), // 星标图标
              Text('Item ${index + 1}'), // 项目文本
            ],
          ),
        ),
      ),
    );
  }
}