Flutter自动排序包装组件插件auto_sort_wrap_widget的使用

auto_sort_wrap_widget 是一个用于自动排列布局的小部件插件。它能够像俄罗斯方块一样自动调整布局，适合在小屏幕上展示更多的数据。

示例效果

使用默认 Flutter 小部件的结果

final data = ['show me the money', 'asbcdef', '1234567890', 'hi', 'love'];

Wrap(
  runSpacing: 5,
  spacing: 5,
  children: List.generate(data.length, (index) => _getItem(data[index])),
)

使用 AutoSortWrapWidget 的结果

final data = ['show me the money', 'asbcdef', '1234567890', 'hi', 'love'];

AutoSortWrapWidget<String>(
  data: data,
  runSpacing: 5,
  spacing: 5,
  itemBuilder: (context, index, data) => _getItem(data)
);

数据类型为 Widget 的结果

final data = ['show me the money', 'asbcdef', '1234567890', 'hi', 'love'];

AutoSortWrapWidget<Widget>(
  data: List.generate(data.length, (index) => _getItem(data[index])),
  runSpacing: 5,
  spacing: 5,
  itemBuilder: (context, index, data) => Container(
    child: data,
    padding: const EdgeInsets.all(5.0),
    color: Colors.blueAccent,
  ),
);

使用说明

初始化项目

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  auto_sort_wrap_widget: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用 AutoSortWrapWidget 插件。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AutoSortWrapWidget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'AutoSortWrapWidget Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List<String> data = [
    'spent',
    'life',
    'suffocating',
    'Ignoring',
    'villains',
    'living',
    'Will',
    'Under',
    'Will you stay a part of me',
    'You’re killing me from within'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(30.0),
              child: Container(
                color: Colors.amber.withOpacity(0.3),
                child: AutoSortWrapWidget<String>(
                  data: data,
                  runSpacing: 5,
                  spacing: 5,
                  itemBuilder: (context, index, aa) {
                    return Container(
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: const BorderRadius.all(
                          Radius.circular(40),
                        ),
                        boxShadow: const [
                          BoxShadow(
                            color: Colors.white10,
                            offset: Offset(4.0, 4.0),
                            blurRadius: 15.0,
                            spreadRadius: 1.0,
                          ),
                          BoxShadow(
                            color: Colors.white,
                            offset: Offset(-4.0, -4.0),
                            blurRadius: 15.0,
                            spreadRadius: 1.0,
                          ),
                        ],
                      ),
                      child: Text(aa,
                        style: TextStyle(fontSize: 15),
                        maxLines: 10,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

运行效果

运行上述代码后，您将看到一个自动排序的小部件，类似于俄罗斯方块的效果。每个文本块会根据其长度自动调整位置，从而更有效地利用屏幕空间。

注意事项

• AutoSortWrapWidget 的数据类型可以是 T 或 Widget。
• 如果数据项的大小不同，AutoSortWrapWidget 会自动重新排列以优化布局。
• 可以通过 runSpacing 和 spacing 参数调整行间距和列间距。

MIT 许可证

Copyright (c) 2018 Simon Leier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the 'Software'), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.