Flutter 中的任何圆形图像重叠插件答案

【问题标题】：Any Circle images overlapping plugin in FlutterFlutter 中的任何圆形图像重叠插件
【发布时间】：2020-06-18 10:29:01
【问题描述】：

Flutter 中是否有任何插件可以实现类似 Instagram 上喜欢图片的人的个人资料图片预览？

【问题讨论】：

标签： image flutter overlapping circleimage

【解决方案1】：

或者您可以在 ListView(); 小部件内部使用对齐

Widget _stackedHeads() => Container(
      width: double.infinity,
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (context, index) {
            return Align(
              widthFactor: 0.6,
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 18,

                  backgroundImage: NetworkImage(
                      'https://www.jessleewong.com/wp-content/uploads/2019/12/jessleewong_20191109_3.jpg'), // Provide your custom image
                ),
              ),
            );
          }));

当您的内容是动态的时会派上用场，因为Align(); 小部件属性widthFactor: 中的代码决定了它们应该在水平方向上重叠多少。

【讨论】：

【解决方案2】：

没有插件，但您可以在堆栈中使用圆形头像（带白色边框）制作自定义插件。

class CustomAvatars extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 40,
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.centerRight,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

谢谢，但 Align 并没有像附加的图片那样重叠它们。
当你使用堆栈小部件时，检查你是否正在使用堆栈

【解决方案3】：

没有插件，但您可以使用圆形头像制作自定义插件并放置在堆栈中。

      import 'package:flutter/material.dart';
      class CustomAvatar extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return Container(
            width: 80,
            height: 40,
            color: Colors.white,
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 0,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
                Positioned(
                  left: 8,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
                Positioned(
                  left: 16,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      }

【讨论】：