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

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

GoResponsive MIT

一个受responsive_framework连续逻辑和基于上下文的响应式数据以及responsive_builder响应式小部件启发的简单但表达性强的响应式框架。生成所有定义的断点作为可选参数，以及必需的默认小部件参数。

特性

GoResponsive通过以下方式使响应式设计变得简单：

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

开始使用

依赖项

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

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

使用示例

1. 定义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'),
];

2. 在MaterialApp的构建器函数中返回GoResponsiveBuilder，并将断点设置为已定义的breakpoints列表。

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,
        );
      },
    );
  }
}

3. 运行dart run build_runner build在控制台中生成go_responsive.g.dart

4. 导入go_responsive.dart，然后可以使用context.goResponsiveValue

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,
        ),
      ),
    );
  }
}

5. 使用或GoResponsiveWidget

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),
      ),
    );
  }
}

6. 或者使用context.is{breakpoint_name}与if else

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),
    );
  }
}

7. 或者使用context.goResponsiveData和GoResponsiveBreakpoints.{breakpoint_name}组合以实现自定义条件

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),
    );
  }
}