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

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

ElResponsive

ElResponsive 是一个用于Flutter的响应式布局包。它作为一种MediaQuery的替代方案，仅在屏幕类型发生变化时触发重建，而不是在每次像素变化时都触发重建。

使用

1. 添加依赖

首先，在你的pubspec.yaml文件中添加最新版本的el_responsive包，并运行dart pub get：

dependencies:
  el_responsive: ^0.0.1

2. 导入并使用

然后在你的Flutter应用中导入该包：

import 'package:el_responsive/el_responsive.dart';

如何使用

1. 添加 ElResponsiveContainer

在应用的顶层添加ElResponsiveContainer小部件，并指定你想要监听的屏幕列表。每个ElScreen都有一个名称和断点值。

• name 可以是任何类型，例如：
  • String（参见示例1）
  • enum（参见示例2）

ElResponsiveContainer(
  screens: [
    ElScreen(name: "mobile", breakpoint: 480),
    ElScreen(name: "tablet", breakpoint: 768),
    ElScreen(name: "desktop", breakpoint: 1024),
  ],
  child: const MyHomePage(),
),

2. 监听 ElResponsive

在build方法中监听ElResponsive，就像使用MediaQuery一样。注意，这里我们把ElResponsive.of(context)!.screen强制转换为String，因为我们给ElScreen的name类型是String。

[@override](/user/override)
Widget build(BuildContext context) {
  final String screenType = ElResponsive.of(context)!.screen as String;

  return ...;
}

这个小部件现在只会当提供的屏幕类型发生变化时才会重建，而不是像使用MediaQuery那样在每次像素变化时都重建。

示例

你可以查看以下完整的示例来了解如何使用name作为String的屏幕类型：

• 示例1

下面是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: ElResponsiveContainer(
        screens: [
          ElScreen(name: "mobile", breakpoint: 480),
          ElScreen(name: "tablet", breakpoint: 768),
          ElScreen(name: "desktop", breakpoint: 1024),
        ],
        child: const MyHomePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    debugPrint("ChildScreen got build");

    final String screenType = ElResponsive.of(context)!.screen as String;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Widget title"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          screenType == "mobile"
              ? const Icon(Icons.phone_android)
              : screenType == "tablet"
                  ? const Icon(Icons.tablet_android)
                  : const Icon(Icons.desktop_windows),
          const SizedBox(height: 24.0),
          Text(
            '$screenType Screen',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
        ],
      ),
    );
  }
}