flutter 在CircleAvatar中定位芯片

eufgjt7s  于 2022-12-30  发布在  Flutter
关注(0)|答案(4)|浏览(117)

我尝试将Chip定位在CircleAvatar的右上角,类似于下面的位置,但似乎无法移动它

SizedBox(
                      width: 50,
                      height: 50,
                      child: Stack(
                        children: [
                          CircleAvatar(
                            radius: 50,
                            backgroundColor: Colors.indigo,
                            child: Stack(
                              children: const [
                                Align(
                                  alignment: Alignment.topRight,
                                  child: Chip(
                                      label: Text('7'),
                                      side: BorderSide(
                                        color: Colors.white,
                                        width: 1,
                                      )),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

上面的代码将生成以下

piwo6bdm

piwo6bdm1#

通过在Chip小部件上设置materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,可以强制它占用所需的最小空间。

SizedBox(
  width: 100,
  height: 100,
  child: Stack(
    children: const [
      CircleAvatar(
        radius: 50,
        backgroundColor: Colors.indigo,
      ),
      Positioned(
        top: 0,
        right: 0,
        child: Chip(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          label: Text('7'),
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
        ),
      ),
    ],
  ),
)
ruoxqz4g

ruoxqz4g2#

尝试以下代码

Stack(
      children: <Widget>[
        CircleAvatar(child: FlutterLogo(),),
        new Positioned(
          top: 0,
          right: 0,
          child: new Container(
            padding: EdgeInsets.all(1),
            decoration: new BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(6),
            ),
            constraints: BoxConstraints(
              minWidth: 15,
              minHeight: 15,
            ),
            child: new Text('11',
              style: new TextStyle(
                color: Colors.white,
                fontSize: 11,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        )
      ],
    ),

结果-〉x1c 0d1x

pbpqsu0x

pbpqsu0x3#

您不需要嵌套的Stack,并且在放置小部件时缺少层次结构。将materialTapTargetSize设置为MaterialTapTargetSize.shrinkWrap,这将删除芯片周围的默认填充。并强制它缩小到其大小
代码中的错误:

Stack
 | CircularAvatar
   | Stack          <-- Not needed
     | Align

正确代码:

Stack
  | CircularAvatar
  | Align           <-- Should be in same hierarchy as CircularAvatar

请尝试以下代码:

SizedBox(
        height: 100,
        width: 100,
        child: Stack(
          children: const [
            CircleAvatar(
              backgroundColor: Colors.amber,
              radius: 50,
              backgroundImage: NetworkImage(
                  'https://th.bing.com/th/id/OIP.KZ9jKGoLM_wXMX6aHCB6oAHaEY?pid=ImgDet&rs=1'),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Chip(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                label: Text(
                  '78',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                padding: EdgeInsets.zero,
                labelPadding: EdgeInsets.symmetric(horizontal: 10),
                backgroundColor: Colors.black
              ),
            )
          ],
        ),
      ),

输出:

pwuypxnk

pwuypxnk4#

不需要嵌套堆栈来实现这一点,我只是简单地将Chip Package 在FittedBox中,然后将FittedBox Package 在SizedBox中,这里需要理解的是,CircleAvatar必须小于主SizedBoxChip必须小于CircleAvatar,以便正确地堆叠它们。为此,我使用了三个变量,其中mainSize是主SizedBox的大小,radiusCircleAvatar的半径,它是mainSize的三分之二,avatarSize是包含ChipSizedBox的大小,并且是radius的一半(或mainSize的三分之一)。
下面是修改后的代码:

double mainSize = 50;
double radius = mainSize * 2 / 3;
double avatarSize = radius / 2;

SizedBox(
            width: mainSize,
            height: mainSize,
            child: Stack(
              children: [
                CircleAvatar(
                  radius: radius,
                  backgroundColor: Colors.indigo,
                  child: Text('BN'),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: SizedBox(
                    width: avatarSize,
                    height: avatarSize,
                    child: FittedBox(
                      child: Chip(
                        label: Text('17'),
                        side: BorderSide(
                          color: Colors.white,
                          width: 1,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),

希望能有所帮助!

相关问题