Flutter屏幕断点检测插件screen_breakpoints的使用

特性

• 极其简单的实现
• 支持有和无配置
• 可定制化
• 提供Bootstrap断点或Material Design断点

断点

默认断点（Bootstrap）

Material Design断点

开始使用

导入库

import 'package:screen_breakpoints/screen_breakpoints.dart';

配置断点

如果你想要个性化所有的断点，可以将任何部件包装在MaterialApp（或其他任何你使用的App）之上。例如：

/* ... */
// 这里是默认配置
const myBreakpoints = BreakpointConfiguration(
  xs: const Breakpoint(breakpoint: 0, width: double.infinity, margin: null, padding: 16, columns: 4),
  sm: const Breakpoint(breakpoint: 576, width: 540, margin: null, padding: 16, columns: 8),
  md: const Breakpoint(breakpoint: 768, width: 720, margin: null, padding: 16, columns: 12),
  lg: const Breakpoint(breakpoint: 992, width: 960, margin: null, padding: 16, columns: 12),
  xl: const Breakpoint(breakpoint: 1200, width: 1140, margin: null, padding: 24, columns: 12),
  xxl: const Breakpoint(breakpoint: 1400, width: 1320, margin: null, padding: 24, columns: 12),
);

Widget build(BuildContext context) {
  return BreakpointConfigurator(
    configuration: myBreakpoints,
    child: MaterialApp(
      /* ... */
    ),
  );
}
/* ... */

每个断点都是一个Breakpoint类型，每个断点必须比前一个高，如果设置为NULL，则会默认使用前一个。 默认的断点基于Bootstrap。要使用Material Design断点，将配置参数更改为kMaterialBreakpoints：

/* ... */
Widget build(BuildContext context) {
  return BreakpointConfigurator(
    configuration: kMaterialBreakpoints,
    child: MaterialApp(
      /* ... */
    ),
  );
}
/* ... */

不配置直接使用

否则，你可以直接使用它，它将使用默认设置。

使用方式

这个包包含两个基本的Widget，你可以使用它们：

BreakpointContainer

如果你想要在一个容器中放置对象，并根据断点调整大小，可以使用这个组件。通常适用于Scaffold的body。它可以自动替换当前断点匹配的子部件。

示例代码：

/* ... */

Scaffold(
    appBar: AppBar(
        title: const BreakpointContainer(
            fluid: true,
            alignment: Alignment.center,
            xlChild: Text('Sample Items - Desktop'),
            mdChild: Text('Sample Items - Tablet'),
            child: Text('Sample Items - Mobile'),
        ),
    ),
    body: BreakpointContainer(
        decoration: BoxDecoration(color: theme.cardColor),
        xlChild: _DesktopView(),
        mdChild: _TabletView(),
        child: _MobileView(),
    ),
);

/* ... */

参数列表：

BreakpointContainer(
    height: // 容器高度
    decoration: // 居中的容器装饰
    backgroundDecoration: // 背景容器装饰
    foregroundDecoration: // 前景装饰在居中的容器顶部
    alignment: // 居中的容器对齐方式
    clipBehavior: // 居中的容器剪裁行为
    fluid: // 设置fluid为true将忽略断点的宽度和边距
    xxlChild: // 在XXL断点时显示的子部件，如果没有则使用下一个
    xlChild: // 在XL断点时显示的子部件，如果没有则使用下一个
    lgChild: // 在LG断点时显示的子部件，如果没有则使用下一个
    mdChild: // 在MD断点时显示的子部件，如果没有则使用下一个
    smChild: // 在SM断点时显示的子部件，如果没有则使用下一个
    child: // 在XS及以上断点时显示的子部件，这是必需的
);

BreakpointBuilder

这是一个基于BreakpointContainer的构建器。如果你需要为每个断点构建复杂的布局，可以使用这个。它在每次重建时都会提供BuildContext、Breakpoint和BreakpointConfiguration。

示例代码：

/* ... */

Scaffold(
    /* ... */
    body: BreakpointBuilder(
        decoration: BoxDecoration(color: theme.cardColor),
        builder: (context, breakpoint, configuration) {
          if(breakpoint >= configuration.xl) return _DesktopView();
          if(breakpoint >= configuration.md) return _TabletView();
          return _MobileView();
        }
    ),
    /* ... */
);

/* ... */

上述示例的结果与之前的BreakpointContainer相同，这里的主要区别是你有一个带有上下文的构建器，因此你可以更好地控制结果。

参数列表：

BreakpointContainer(
    builder: // 构建小部件的构建器
    height: // 容器高度
    decoration: // 居中的容器装饰
    backgroundDecoration: // 背景容器装饰
    foregroundDecoration: // 前景装饰在居中的容器顶部
    alignment: // 居中的容器对齐方式
    clipBehavior: // 居中的容器剪裁行为
    fluid: // 设置fluid为true将忽略断点的宽度和边距
);

查找当前断点

有一种简单的方法可以从BuildContext或MediaQuery中查找当前断点。只需在build函数中键入以下内容：

Widget build(BuildContext context) {
  // 从Build Context
  final breakpoint = Breakpoint.fromContext(context);
  // 替代方法
  final breakpoint = context.breakpoint;
  
  // 从Media Query
  final mediaQuery = MediaQuery.of(context);
  final breakpoint = Breakpoint.fromMediaQuery(mediaQuery);
}

示例代码

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

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

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

  // 拷贝自Material Design
  static const breakpoints = BreakpointConfiguration(
    xs: Breakpoint(breakpoint: 0, width: double.infinity, margin: 16, padding: 0, columns: 4),
    sm: Breakpoint(breakpoint: 600, width: double.infinity, margin: 32, padding: 0, columns: 8),
    md: Breakpoint(breakpoint: 905, width: 840, margin: null, padding: 0, columns: 12),
    lg: Breakpoint(breakpoint: 1240, width: double.infinity, margin: 200, padding: 0, columns: 12),
    xl: Breakpoint(breakpoint: 1440, width: 1040, margin: null, padding: 0, columns: 12),
    xxl: null,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BreakpointConfigurator(
      configuration: breakpoints,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: BreakpointContainer(
          fluid: true,
          alignment: Alignment.center,
          xlChild: Text('${widget.title} - Desktop'),
          mdChild: Text('${widget.title} - Tablet'),
          child: Text('${widget.title} - Mobile'),
        ),
      ),
      body: BreakpointContainer(
        xlChild: _DesktopView(counter: _counter),
        mdChild: _TabletView(counter: _counter),
        child: _MobileView(counter: _counter),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class _MobileView extends StatelessWidget {
  final int counter;

  const _MobileView({Key? key, required this.counter}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

class _TabletView extends StatelessWidget {
  final int counter;

  const _TabletView({Key? key, required this.counter}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

class _DesktopView extends StatelessWidget {
  final int counter;

  const _DesktopView({Key? key, required this.counter}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}