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

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

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

dependencies:
  flutter:
    sdk: flutter
  responsive_media_query: ^x.y.z  # 请替换为最新版本号

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

接下来，是一个完整的Flutter应用示例，展示了如何使用responsive_mediaquery插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Layout with responsive_mediaquery',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResponsiveScreen(),
    );
  }
}

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建ResponsiveMediaQueryData实例
    final media = ResponsiveMediaQuery.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Screen Size: ${media.screenSize}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            Text(
              'Orientation: ${media.orientation == Orientation.portrait ? 'Portrait' : 'Landscape'}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            // 根据屏幕尺寸调整布局
            if (media.isSmallScreen)
              SmallScreenLayout()
            else if (media.isMediumScreen)
              MediumScreenLayout()
            else
              LargeScreenLayout(),
          ],
        ),
      ),
    );
  }
}

// 小屏幕布局
class SmallScreenLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      child: Column(
        children: [
          Text('This is a small screen layout'),
          SizedBox(height: 20),
          // 其他小屏幕组件
        ],
      ),
    );
  }
}

// 中等屏幕布局
class MediumScreenLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: Column(
              children: [
                Text('This is a medium screen layout - Column 1'),
                // 其他中等屏幕组件
              ],
            ),
          ),
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: Column(
              children: [
                Text('This is a medium screen layout - Column 2'),
                // 其他中等屏幕组件
              ],
            ),
          ),
        ),
      ],
    );
  }
}

// 大屏幕布局
class LargeScreenLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 1.0,
      children: List.generate(9, (index) {
        return Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
          child: Center(child: Text('Item $index')),
        );
      }),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它根据屏幕尺寸（小、中、大）来显示不同的布局。我们使用ResponsiveMediaQuery来获取屏幕尺寸和方向，并根据这些信息动态调整UI布局。

• SmallScreenLayout：在小屏幕上显示一个简单的列布局。
• MediumScreenLayout：在中等屏幕上显示一个包含两列的行布局。
• LargeScreenLayout：在大屏幕上显示一个3列的GridView布局。

你可以根据具体需求进一步自定义这些布局。