Flutter响应式布局生成插件go_responsive_generator的使用

简介

GoResponsive 是一个受 responsive_framework 和 responsive_builder 启发的简单但功能强大的响应式框架。它通过代码生成的方式支持所有定义的断点参数，并提供了多种方法来实现响应式设计。

特性

• 生成带所有定义断点的 GoResponsiveWidget，并带有必需的默认小部件参数。
• 在 BuildContext 上生成 context.goResponsiveValue<T> 扩展方法，可用于设置类型化值。
• 在 BuildContext 上生成 context.is{breakpoint_name} 扩展方法，可用于条件判断。
• 生成 GoResponsiveBreakpoints.{breakpoint_name} 字符串字段以获取断点名称。

开始使用

依赖安装

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

dependencies:
  ...
  go_responsive: <version>
  go_responsive_annotation: <version>

dev_dependencies:
  ...
  build_runner: <version>
  go_responsive_generator: <version>

然后运行以下命令以生成代码：

dart run build_runner build

定义断点

创建一个名为 go_responsive.dart 的文件，并定义断点：

// go_responsive.dart
import 'package:flutter/widgets.dart';
import 'package:go_responsive/go_responsive.dart';
import 'package:go_responsive_annotation/go_responsive_annotation.dart';

part 'go_responsive.g.dart';

@goResponsive
const breakpoints = [
  GoResponsiveBreakpoint(size: 600, name: 'compact'),
  GoResponsiveBreakpoint(size: 840, name: 'medium'),
  GoResponsiveBreakpoint(size: double.maxFinite, name: 'expanded'),
];

使用 GoResponsiveBuilder

在 MaterialApp 中返回 GoResponsiveBuilder 并设置已定义的断点列表：

// main.dart
import 'package:flutter/material.dart';
import 'go_responsive.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
      builder: (context, child) {
        return GoResponsiveBuilder(
          breakpoints: breakpoints,
          child: child,
        );
      },
    );
  }
}

使用 context.goResponsiveValue

可以通过 context.goResponsiveValue 设置不同断点下的值：

// home.dart
import 'package:flutter/material.dart';
import 'go_responsive.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: context.goResponsiveValue(
          compact: Colors.red,
          medium: Colors.green,
          expanded: Colors.blue,
          defaultValue: Colors.black,
        ),
      ),
    );
  }
}

使用 GoResponsiveWidget

也可以直接使用 GoResponsiveWidget 来定义不同断点下的小部件：

// home2.dart
import 'package:flutter/material.dart';
import 'go_responsive.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoResponsiveWidget(
        compact: Container(color: Colors.red),
        medium: Container(color: Colors.green),
        expanded: Container(color: Colors.blue),
        defaultWidget: Container(color: Colors.black),
      ),
    );
  }
}

使用 context.is{breakpoint_name}

通过 context.is{breakpoint_name} 判断当前断点并设置不同的逻辑：

// home3.dart
import 'package:flutter/material.dart';
import 'go_responsive.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    var color = Colors.black;

    if (context.isCompact) {
      color = Colors.red;
    }

    if (context.isMedium) {
      color = Colors.green;
    }

    if (context.isExpanded) {
      color = Colors.blue;
    }

    return Scaffold(
      body: Container(color: color),
    );
  }
}

使用 context.goResponsiveData 和 GoResponsiveBreakpoints

结合 context.goResponsiveData 和 GoResponsiveBreakpoints 进行更复杂的条件判断：

// home4.dart
import 'package:flutter/material.dart';
import 'go_responsive.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    var color = Colors.black;

    if (context.goResponsiveData.smallerOrEqualTo(GoResponsiveBreakpoints.compact)) {
      color = Colors.red;
    }

    if (context.goResponsiveData.between(
      GoResponsiveBreakpoints.compact,
      GoResponsiveBreakpoints.expanded,
    )) {
      color = Colors.green;
    }

    if (context.goResponsiveData.between(
      GoResponsiveBreakpoints.medium,
      GoResponsiveBreakpoints.expanded,
    )) {
      color = Colors.blue;
    }

    return Scaffold(
      body: Container(color: color),
    );
  }
}