Question

我正在使用Flutter开发一个移动应用程序，我想在CircleAvatar周围放置一些小图标。请参阅以下红点：

下面是处理它的代码：

  Widget _createHeader(BuildContext context) {
return UserAccountsDrawerHeader(
  accountEmail: Text(userEmail),
  accountName: Text(userName),
  currentAccountPicture: ClipRRect(
    borderRadius: BorderRadius.circular(110),
    child:
        CircleAvatar(
          backgroundImage: NetworkImage(userImageUrl),
          radius: 60,
          backgroundColor: Colors.transparent,
        ),
    ),
        decoration: BoxDecoration(
          color: Theme.of(context).primaryColor
        ),
);

}

我想用图标跟随圆的圆度，但是我不知道如何实现。我试图将CircleAvatar包装到Row或Container中，但没有设法获得效果。有办法吗？

Answer 1

我不确定是否可以将其直接包裹在小部件周围，但是可以结合使用Stack和Positioned来实现。在此示例中，您需要根据需要自定义radius，iconSize和distance变量。

@override
Widget build(BuildContext context) {
    double radius = 40;
    double iconSize = 20;
    double distance = 10;
    return Scaffold(
      body: Center(
        child:
        Stack(
            alignment: Alignment.center,
            overflow: Overflow.visible,
            children: [
              CircleAvatar(
                radius: radius,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              ),
              Positioned(
                  top: -(radius + iconSize + distance),
                  right: 0,
                  bottom: radius,
                  left: 0,
                  child: Icon(
                    Icons.access_alarm,
                    color: Colors.blue,
                    size: iconSize,
                  )),
              Positioned(
                  top: -(iconSize + radius),
                  right: -(radius + iconSize - distance),
                  bottom: iconSize,
                  left: radius,
                  child: Icon(
                    Icons.email,
                    color: Colors.blue,
                    size: iconSize,
                  )),
              Positioned(
                  top: -(radius - distance),
                  right: -(radius + iconSize + distance),
                  bottom: -iconSize,
                  left: radius,
                  child: Icon(
                    Icons.account_balance,
                    color: Colors.blue,
                    size: iconSize,
                  )),
            ]),
      ),
    );
}

如何在CircleAvatar周围放置图标

1 个答案: