Flutter重叠头像显示插件overapped_avatars的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter重叠头像显示插件overapped_avatars的使用

overapped_avatars 插件可以用于在 Flutter 应用程序中显示重叠的头像。此插件提供了多种布局方式,使头像列表看起来更加自然。

示例

预览图

完整示例代码

import 'package:overapped_avatars/overapped_avatars.dart';
import 'package:overapped_avatars/avatar_list_item.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Overlapped Avatars Demo'),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  AvatarListLeading leading = AvatarListLeading.tight;
  bool expanded = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    var items = expanded
        ? List.generate(49, (index) => index + 1)
        : List.generate(4, (index) => index + 1);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(vertical: 10),
              width: double.infinity,
              height: 120,
              child: GestureDetector(
                onTap: () {
                  changeState();
                },
                child: AvatarList(
                  leading: AvatarListLeading.none,
                  avatars: List.generate(49, (index) => index + 1)
                      .map(generateAvatarListItem)
                      .toList(),
                ),
              ),
            ),
            FittedBox(
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 10),
                height: 120,
                child: GestureDetector(
                  onTap: () {
                    changeState();
                  },
                  child: Flex(
                    direction: Axis.horizontal,
                    children: [
                      AvatarList(
                        leading: AvatarListLeading.tight,
                        avatars: List.generate(4, (index) => index + 1)
                            .map(generateAvatarListItem)
                            .toList(),
                      ),
                      SizedBox(width: 60),
                      Expanded(
                        flex: 0,
                        child: Container(
                          alignment: Alignment.centerRight,
                          child: Text(
                            '+40',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 40, fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            GestureDetector(
              onTap: () {
                setState(() {
                  expanded = !expanded;
                });
              },
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 10),
                width: double.infinity,
                height: 120,
                child: AvatarList(
                  leading: expanded
                      ? AvatarListLeading.none
                      : AvatarListLeading.tight,
                  avatars: items.map(generateAvatarListItem).toList(),
                ),
              ),
            ),
            SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 20.0,
                borderOnForeground: true,
                child: Container(
                  width: double.infinity,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 16, vertical: 16),
                        child: Text(
                          'Buy the milk.',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 4,
                        ),
                        margin: const EdgeInsets.only(bottom: 16),
                        child: Text(
                          '2021-07-16',
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 16, vertical: 16),
                        child: Container(
                          padding: const EdgeInsets.symmetric(vertical: 0),
                          width: double.infinity,
                          height: 40,
                          child: AvatarList(
                            leading: AvatarListLeading.loose,
                            avatars: List.generate(4, (index) => index + 1)
                                .map((index) =>
                                    generateAvatarListItemWithRadius(
                                        index, 20.0))
                                .toList(),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  AvatarListItem generateAvatarListItem(index) {
    var name = index > 9 ? '0$index.jpg' : '00$index.jpg';
    return AvatarListItem(
      imageProvider: AssetImage('images/$name'),
      radius: 50,
    );
  }

  AvatarListItem generateAvatarListItemWithRadius(index, radius) {
    var name = index > 9 ? '0$index.jpg' : '00$index.jpg';
    return AvatarListItem(
      imageProvider: AssetImage('images/$name'),
      radius: radius,
    );
  }

  void changeState() {
    var nextState;

    switch (leading) {
      case AvatarListLeading.tight:
        nextState = AvatarListLeading.none;
        break;
      case AvatarListLeading.none:
        nextState = AvatarListLeading.tight;
        break;
      default:
        break;
    }
    if (nextState != null) {
      setState(() => leading = nextState);
    }
  }
}

更多关于Flutter重叠头像显示插件overapped_avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter重叠头像显示插件overapped_avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中,如果你想实现重叠头像的效果(例如,多个用户的头像重叠显示),可以使用 overlapped_avatars 插件。这个插件可以帮助你轻松地实现这种视觉效果。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 overlapped_avatars 依赖:

dependencies:
  flutter:
    sdk: flutter
  overlapped_avatars: ^1.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 OverlappedAvatars

OverlappedAvatars 组件允许你将多个头像重叠在一起。你可以通过传递一个 List<Widget>(通常是 CircleAvatar)来构造重叠头像。

以下是一个简单的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Overlapped Avatars Example'),
        ),
        body: Center(
          child: OverlappedAvatars(
            avatars: [
              CircleAvatar(
                backgroundImage: AssetImage('assets/avatar1.png'),
              ),
              CircleAvatar(
                backgroundImage: AssetImage('assets/avatar2.png'),
              ),
              CircleAvatar(
                backgroundImage: AssetImage('assets/avatar3.png'),
              ),
            ],
            overlapFraction: 0.5, // 重叠的比例,默认是 0.5
            reverse: false, // 是否反向重叠,默认是 false
          ),
        ),
      ),
    );
  }
}

参数说明

  • avatars: 一个 List<Widget>,通常包含多个 CircleAvatar,表示要重叠的头像。
  • overlapFraction: 头像之间的重叠比例,取值范围在 0.01.0 之间。默认值是 0.5,表示头像之间重叠一半。
  • reverse: 是否反向重叠。如果设置为 true,头像的显示顺序将反转。

自定义头像

你可以使用 CircleAvatar 来显示本地图片、网络图片或文本。例如:

CircleAvatar(
  backgroundImage: NetworkImage('https://example.com/avatar.png'),
),
CircleAvatar(
  backgroundColor: Colors.blue,
  child: Text('A'),
),
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!