Flutter布局管理插件boxy的使用

About

Boxy是一个Flutter包，旨在克服内置布局小部件的局限性。它提供了用于flex布局、自定义多子布局、动态小部件膨胀（inflation）、slivers等的工具！该包已经准备好投入生产使用，具有出色的文档、测试覆盖率，并通过严格的分析。

您可以查看新的wiki页面以获取更多信息。

Flex layouts

在设计中，一个常见的问题是需要Row或Column的一个或多个子元素与列表中的另一个子元素具有相同的交叉轴尺寸。使用Boxy，这可以通过使用BoxyRow、BoxyColumn和Dominant轻松实现。

• 使用BoxyRow时，侧边栏可以匹配动态大小容器的高度。
• 使用BoxyColumn时，下划线可以匹配动态大小容器的宽度。
• 使用BoxyColumn和BoxyFlexible.align，顶部子元素可以相对于其他子元素具有自定义的交叉轴对齐方式。

更多详情请参阅BoxyRow和BoxyColumn的文档。

Custom layouts

实现自定义布局的一个痛点是学习RenderObject模型以及它是多么冗长。为了简化这个过程，我们提供了一个极其简单的容器CustomBoxy，它委托布局、绘制和命中测试。

1. 声明使用CustomBoxy的小部件。
2. 实现委托。例如，在列中创建带有头像的动态标题和内容，头像固定在两者中心。

CustomBoxy最强大的功能之一是在布局时膨胀任意小部件，这意味着小部件可以依赖于其他小部件的大小，这是以前没有hacky解决方法无法实现的。

更多详情请参阅CustomBoxy和BoxyDelegate的文档。

Slivers

您是否想给SliverList添加一个盒装饰？sliver库提供了SliverContainer，允许您将盒小部件用作sliver的前景或背景。此库还提供了SliverCard，一种看起来像卡片的SliverContainer。

此外，请查看：

• SliverPadding，一个被低估的内置小部件。
• sliver_tools，一个做类似事情的酷包。

Miscellaneous

utils库提供了对BoxConstraints、Size、Offset等扩展，包含数十个轴相关的方法。这些扩展使编写方向性布局显著减少麻烦。

OverflowPadding小部件类似于Padding，但在给出负内边距时允许子元素溢出。

示例代码

以下是一个完整的示例代码，展示了如何使用Boxy进行布局：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Boxy Example',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Boxy Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用BoxyRow
            BoxyRow(
              children: [
                Dominant(child: Container(color: Colors.red, width: 100, height: 100)),
                Container(color: Colors.blue, width: 50),
              ],
            ),
            SizedBox(height: 20),
            // 使用BoxyColumn
            BoxyColumn(
              children: [
                Dominant(child: Container(color: Colors.green, width: 100, height: 100)),
                Container(color: Colors.yellow, height: 50),
              ],
            ),
            SizedBox(height: 20),
            // 使用CustomBoxy
            CustomBoxy(
              delegate: MyCustomBoxyDelegate(),
              children: [
                Container(color: Colors.orange, width: 100, height: 100),
                Container(color: Colors.purple, width: 50, height: 50),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义BoxyDelegate
class MyCustomBoxyDelegate extends BoxyDelegate {
  @override
  Size layout(BoxConstraints constraints, List<BoxyChild> children) {
    final firstChild = children[0].inflate(constraints);
    final secondChild = children[1].inflate(constraints.copyWith(maxWidth: firstChild.width));
    
    return Size(firstChild.width, firstChild.height + secondChild.height);
  }

  @override
  void paint(PaintingContext context, Offset offset, List<BoxyChild> children) {
    final firstChild = children[0];
    final secondChild = children[1];

    context.paintChild(offset, firstChild);
    context.paintChild(Offset(offset.dx, offset.dy + firstChild.size.height), secondChild);
  }
}

这段代码展示了如何使用BoxyRow、BoxyColumn和CustomBoxy来创建复杂的布局。通过这种方式，您可以更灵活地控制Flutter应用中的布局。