Flutter自适应布局插件wrapfit的使用

WrapFit 是一个用于 Wrap 布局的新特性，它允许子组件在当前行或列中根据剩余空间进行自适应调整。虽然这个特性还在 PR 阶段（PR #136161），但已经有一个独立的包 wrapfit 提供了类似的功能。

免责声明

一旦 WrapFit 被合并到 Flutter 的稳定版本中，该包将被归档，并发布一个新版本标记所有功能为废弃状态。升级到 Flutter 实现应该只需将 Wrap2 替换为 Wrap。

如果 PR 没有被合并，该包可能会在没有替代方案的情况下被归档。

特性

主要功能是允许开发者扩展 Wrap2 的子组件以填充当前行或列的剩余空间。以下是不同 WrapFit 选项的效果示例：

开始使用

1. 添加依赖：

   flutter pub add wrapfit
   

2. 使用 Wrap2 替代 Wrap。

3. 将 Wrap2 的子组件包裹在 Wrapped 中，并设置 fit 属性：

   • WrapFit.runTight
   • WrapFit.runLoose
   • WrapFit.tight
   • WrapFit.loose

示例代码

以下是一个完整的示例 Demo，展示了如何使用 Wrap2 和 Wrapped 来创建自适应布局。

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

void main() => runApp(const WrapExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WrapExample(),
    );
  }
}

class WrapExample extends StatefulWidget {
  const WrapExample({super.key});

  @override
  State<WrapExample> createState() => _WrapExampleState();
}

class _WrapExampleState extends State<WrapExample> {
  List<String> items = ['Item 0', 'Item 1'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wrap Example')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Wrap2(
          runSpacing: 8,
          spacing: 8,
          children: <Widget>[
            for (int i = 0; i < items.length; i++)
              Container(
                decoration: BoxDecoration(border: Border.all()),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text(items[i]),
                    IconButton(
                      onPressed: () {
                        setState(() {
                          items.removeAt(i);
                        });
                      },
                      icon: const Icon(Icons.delete),
                    )
                  ],
                ),
              ),
            Wrapped(
              // 如果子组件适合当前行，则其最大宽度将设置为剩余空间。
              // 否则它可以像 Wrap 一样宽
              fit: WrapFit.runLoose,
              child: TextField(
                autofocus: true,
                decoration: const InputDecoration(
                    hintText: 'some text', counterText: 'press ENTER to add'),
                onSubmitted: (String value) {
                  setState(() {
                    items.add(value);
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

详细说明

在这个示例中，我们创建了一个简单的应用，其中包含一个 Wrap2 布局和多个可删除的项目。最后一个项目是一个文本输入框，当用户输入内容并按下回车键时，新的项目将被添加到列表中。

通过使用 Wrapped 包裹文本输入框，并设置 fit: WrapFit.runLoose，我们可以确保文本输入框根据当前行的剩余空间自动调整大小。这样可以实现更灵活的布局效果。

希望这个示例能帮助你更好地理解 wrapfit 插件的使用方法！