我尝试将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,
)),
)
],
),
),
],
),
),
上面的代码将生成以下
4条答案
按热度按时间piwo6bdm1#
通过在
Chip
小部件上设置materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
,可以强制它占用所需的最小空间。ruoxqz4g2#
尝试以下代码
结果-〉x1c 0d1x
pbpqsu0x3#
您不需要嵌套的
Stack
,并且在放置小部件时缺少层次结构。将materialTapTargetSize
设置为MaterialTapTargetSize.shrinkWrap
,这将删除芯片周围的默认填充。并强制它缩小到其大小代码中的错误:
正确代码:
请尝试以下代码:
输出:
pwuypxnk4#
不需要嵌套堆栈来实现这一点,我只是简单地将
Chip
Package 在FittedBox
中,然后将FittedBox
Package 在SizedBox
中,这里需要理解的是,CircleAvatar
必须小于主SizedBox
,Chip
必须小于CircleAvatar
,以便正确地堆叠它们。为此,我使用了三个变量,其中mainSize
是主SizedBox
的大小,radius
是CircleAvatar
的半径,它是mainSize
的三分之二,avatarSize
是包含Chip
的SizedBox
的大小,并且是radius
的一半(或mainSize
的三分之一)。下面是修改后的代码:
希望能有所帮助!