另一个断点框架。旨在尽可能简化自适应布局的构建。

特点

  • 非常简单的实现
  • 带有配置和不带配置均可使用
  • 可定制
  • Bootstrap 断点或 Material Design 断点已准备就绪

断点

默认断点 (Bootstrap)

Size 名称 最小宽度
特小 xs/无 0
小 sm ≥576
Medium md ≥768
大 lg ≥992
超大 xl ≥1200
特超大 xxl ≥1400

Material Design 断点

Size 名称 最小宽度
特小 xs/无 0
小 sm ≥600
Medium md ≥905
大 lg ≥1240
超大 xl ≥1440
特超大 xxl –

入门

  • 导入库
import 'package:screen_breakpoints/screen_breakpoints.dart';
  • 如果您想个性化所有断点，请将任何小部件包装在 MaterialApp (或其他您使用的 App) 之上。例如

/* ... */
// This is just like the default configuration
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，请将配置参数更改为 kMaterialBreakpoints

/* ... */
Widget build(BuildContext context) {
  return BreakpointConfigurator(
    configuration: kMaterialBreakpoints,
    child: MaterialApp(
      /* ... */
    ),
  );
}
/* ... */
  • 否则，您也可以直接使用它，它将使用默认设置。

用法

此包包含 2 个基本小部件供您使用

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: // Height of the container
    decoration: // Decoration of the centered Container
    backgroundDecoration: // Decoration of the Container behind
    foregroundDecoration: // Foreground decoration on top of the centered Container
    alignment: // Alignment of the centered Container
    clipBehavior: // Clipping of the centered Container
    fluid: // Setting fluid to true will ignore breakpoint's width and margin
    xxlChild: // Child to be shown at XXL Breakpoint, if null will use one below
    xlChild: // Child to be shown at XL Breakpoint, if null will use one below
    lgChild: // Child to be shown at LG Breakpoint, if null will use one below
    mdChild: // Child to be shown at MD Breakpoint, if null will use one below
    smChild: // Child to be shown at SM Breakpoint, if null will use one below
    child: // Child to be shown at XS and up Breakpoint, this one is required.
);

BreakpointBuilder

这是基于 BreakpointContainer 的构建器。如果您需要为每个断点构建复杂的布局，可以使用此构建器。它在后台使用 BreakpointContainer，但会返回一个构建器，每次重建时都会提供：BuildContext、当前的断点以及断点配置。

示例

/* ... */

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 完全相同，不同之处在于这里有一个带有 context 的构建器，因此您可以更好地控制结果。

参数列表

BreakpointContainer(
    builder: // Builder that will build the widget
    height: // Height of the container
    decoration: // Decoration of the centered Container
    backgroundDecoration: // Decoration of the Container behind
    foregroundDecoration: // Foreground decoration on top of the centered Container
    alignment: // Alignment of the centered Container
    clipBehavior: // Clipping of the centered Container
    fluid: // Setting fluid to true will ignore breakpoint's width and margin
);

GitHub

查看 Github