Flutter堆叠布局插件overlap_stack的使用

OverlapStack是一个Flutter插件，它智能地将你的小部件进行堆叠布局，使它们部分重叠，从而实现紧凑且视觉上有趣的布局。这种节省空间的解决方案非常适合用户列表、聊天预览等场景，可以在不杂乱屏幕的情况下展示多个元素。

使用方法

基本用法

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

dependencies:
  flutter:
    sdk: flutter
  overlap_stack: ^最新版本号

然后在你的Dart代码中导入该包：

import 'package:overlap_stack/overlap_stack.dart';

下面是一个基本的示例，展示了如何使用OverlapStack和OverlapStack.builder来创建堆叠布局：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OverlapStack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OverlapStack Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Basic OverlapStack example
            OverlapStack(
              minSpacing: 0.5,
              maxSpacing: 0.5,
              itemSize: const Size(64, 32),
              children: List<Widget>.generate(9, (i) {
                return Container(
                  width: 64,
                  height: 32,
                  alignment: Alignment.center,
                  color: Colors.amber[(i + 1) * 100]!,
                  child: const FlutterLogo(),
                );
              }),
            ),
            SizedBox(height: 20),

            // OverlapStack.builder example
            Container(
              color: Colors.black12,
              height: 40,
              child: OverlapStack.builder(
                minSpacing: 0.5,
                maxSpacing: 0.8,
                leadIndex: 3,
                itemLimit: 12,
                itemCount: 25,
                itemBuilder: (context, i) {
                  return CircleAvatar(
                    foregroundImage: NetworkImage(
                      'https://i.pravatar.cc/50?u=$i',
                    ),
                  );
                },
                infoBuilder: (context, remaining) {
                  return CircleAvatar(
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    child: Text('+$remaining'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

• minSpacing: 最小间距。
• maxSpacing: 最大间距。
• itemSize: 每个小部件的尺寸。
• children: 子小部件列表（用于OverlapStack）。
• itemCount: 子项数量（用于OverlapStack.builder）。
• itemBuilder: 构建子项的回调函数。
• infoBuilder: 当超过限制时显示的信息构建器。

完整示例

以下是更完整的示例，包括一个可调整宽度的容器和滑块控制宽度的功能：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OverlapStack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _width = 500.0;

  void _setWidth(double value) {
    setState(() {
      _width = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OverlapStack Full Example'),
      ),
      body: Center(
        child: SizedBox(
          width: 600,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'OverlapStack',
                style: Theme.of(context).textTheme.headline4,
              ),
              SizedBox(height: 40),
              OverlapStack(
                minSpacing: 0.5,
                maxSpacing: 0.5,
                itemSize: const Size(64, 32),
                children: List<Widget>.generate(9, (i) {
                  return Container(
                    width: 64,
                    height: 32,
                    alignment: Alignment.center,
                    color: Colors.amber[(i + 1) * 100]!,
                    child: const FlutterLogo(),
                  );
                }),
              ),
              SizedBox(height: 20),
              Container(
                color: Colors.amber,
                width: _width,
                height: 50,
                alignment: Alignment.center,
                child: OverlapStack.builder(
                  minSpacing: 0.5,
                  maxSpacing: 0.8,
                  leadIndex: 3,
                  itemSize: const Size.square(40),
                  itemLimit: 12,
                  itemCount: 25,
                  itemBuilder: (context, i) {
                    return CircleAvatar(
                      backgroundImage: NetworkImage('https://i.pravatar.cc/50?u=$i'),
                    );
                  },
                  infoBuilder: (context, remaining) {
                    return CircleAvatar(
                      backgroundColor: Colors.red,
                      foregroundColor: Colors.white,
                      child: Text('+$remaining'),
                    );
                  },
                ),
              ),
              SizedBox(height: 20),
              LayoutBuilder(
                builder: (context, constraints) {
                  return Slider(
                    value: _width,
                    min: constraints.minWidth,
                    max: constraints.maxWidth,
                    onChanged: _setWidth,
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何通过滑块动态调整容器的宽度，并展示了两种不同类型的OverlapStack布局。希望这些示例能帮助你更好地理解和使用overlap_stack插件。