Flutter布局管理插件layout的使用

Layout

根据Material Design指南，Layout鼓励跨平台、环境和屏幕尺寸的一致性，通过使用统一的元素和间距。

安装 Install

按照这里的说明进行安装。

入门 Getting Started

该包旨在以简单和一致的方式提供实现响应式布局所需的工具。 如果您想详细了解Material Design中的布局，我推荐您访问官方网站。

让我们开始吧！

所有内容都从Layout小部件开始。通常添加在小部件树的顶部，但您可以根据需要将其放置在任何位置。它使用其小部件约束来计算断点、列、边距和间隔。

  @override
  Widget build(BuildContext context) {
    return Layout(
      child: MaterialApp(
        // ...
      ),
    );
  }

断点 Breakpoints

断点是预定义屏幕大小范围，具有特定的布局要求。在给定的断点范围内，布局会调整以适应屏幕大小和方向。

每个断点范围确定每种显示大小的列数以及建议的边距和间隔。

默认情况下，断点定义如下：

• xs: 0 – 599
• sm: 600 – 1023
• md: 1024 – 1439
• lg: 1440 – 1919
• xl: 1920 +

 @override
 Widget build(BuildContext context) {
   if(context.breakpoint > LayoutBreakpoint.md)
     return TabletView();
   else
     return MobileView();
 }

布局值 LayoutValues

布局值相对于屏幕宽度。这样可以定义响应式变量，在需要时重用它们并应用它们。

final double padding = context.layout.value(xs: 0.0, sm: 12.0, md: 24.0, lg: 32.0, xl: 48.0);

最重要的布局值是与断点相关的那些。这些是最常见和有用的，因为您可以为不同的断点大小定义一个值。如果未提供断点，则其值将对应于第一个前一个/较小的断点。

final double padding = context.layout.value(
     xs: 0.0,  // sm value will be like xs 0.0
     md: 24.0, // lg value will be like md 24.0
     xl: 48.0
);

布局值可以在应用程序的不同部分甚至不同的Layout小部件中重用。为此，它们需要创建为

final displaySidebar = LayoutValue(xs: false, md: true);

final horizontalMargin = LayoutValue.builder((layout) {
    double margin = layout.width >= 500 ? 24.0 : 16.0;
    margin += 8.0 * layout.visualDensity.horizontal;
    return EdgeInsets.symmetric(horizontal: margin);
});

然后可以在树中有Layout的任何小部件中使用：

return Column(
  children: [
    Padding(
      padding: horizontalMargin.resolve(context),
      child:child,
    ),
    if(displaySidebar.resolve(context))
      SideBar(),
    ),
  ],
);

您还可以创建相对于布局宽度的值。

final displaySidebar = LayoutValue.builder((layout) => layout.width > 600);

边距 Margins

边距是内容与屏幕左右边缘之间的空间。

  @override
  Widget build(BuildContext context) {
    return Margin(
      child: Text('This text'),
    );
  }

边距宽度是在每个断点范围内定义的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处更改。较大的屏幕更适合较宽的边距，因为它们在内容周围创建更多的空白。

默认情况下，边距值是Material Design指南中的值。宽度小于720dp的屏幕为16dp，更大的屏幕为24dp。您可以通过提供边距参数随时覆盖这些值。

流动边距 Fluid Margins

有时您希望有一个在不同屏幕尺寸上保持不变的固定宽度。

  @override
  Widget build(BuildContext context) {
    return FluidMargin(
      child: Text('This text'),
    );
  }

流动边距动态更新以保持其内部子项的固定大小。这些固定大小默认是Material Design指南中的值，但也可以轻松自定义。

自适应构建器 AdaptiveBuilder

允许轻松构建响应式布局的小部件

  @override
  Widget build(BuildContext context) {
    return AdaptiveBuilder(
      xs: (context) => LayoutWithBottomNavigationBar(),
      lg: (context) => LayoutWithTrailingNavigationBar(),
    );
  }

或对于更复杂的情况

  @override
  Widget build(BuildContext context) {
    return  AdaptiveBuilder.builder(
      builder: (context, layout, child) {
        if (layout.breakpoint < LayoutBreakpoint.lg) {
          return LayoutWithBottomNavigationBar(child: child);
        } else {
          return LayoutWithTrailingNavigationBar(child: child);
        }
      },
      child: child,
    );
  }

示例代码 Example Code

以下是完整的示例代码，展示了如何使用layout包创建一个包含响应式布局的应用程序。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Layout(
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          appBarTheme: AppBarTheme(
            color: Colors.white,
          ),
          scaffoldBackgroundColor: Colors.grey[200],
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Layout'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: AdaptiveBuilder(
        xs: (context) => Center(child: Text('Mobile View')),
        md: (context) => Center(child: Text('Tablet View')),
        lg: (context) => Center(child: Text('Desktop View')),
      ),
    );
  }
}

这个示例展示了如何使用Layout和AdaptiveBuilder来创建一个简单的响应式布局，根据屏幕大小显示不同的内容。