Flutter 在 CircleAvatar 中放置芯片

发布于12月29日

我正在试着把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,
                                      )),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

The above code is producing this

推荐答案

您不需要嵌套Stack，并且您在放置小部件时错过了继承性.并将materialTapTargetSize设置为MaterialTapTargetSize.shrinkWrap，这将移除芯片周围的默认填充.并迫使它缩小到它的大小

您的代码中存在错误:

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

正确的代码:

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

try 以下代码:

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
              ),
            )
          ],
        ),
      ),

输出: