Question

我有Column，里面有7个Expanded小部件，其中一个是ClipRRect，但是有一个问题：它不是圆形的。

我认为有两种方法：

用容器包装它，并为其宽度赋予最高值，但我不知道如何？
使用其他小部件吗？

使用CachedNetworkImage时，不能使用CircleAvatar。

Expanded(),
Expanded(),
Expanded(),
Expanded(
          flex: 5,
            //padding: EdgeInsets.symmetric(horizontal: 10),
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Center(
                    child: Text(
                  'tracks',
                  style: TextStyle(color: Colors.white),
                )),
                Container(
                  height: 20,
                  width: 20,
                  color: Colors.red,
                  child: AnimatedBuilder(
                    animation: _animationController,
                    child: AspectRatio (
                      aspectRatio: 1,
                      child: ClipOval(
                        //borderRadius: BorderRadius.circular(10000000.0),
                        child: CachedNetworkImage(
                          fit: BoxFit.cover,
                          imageUrl: thisSongInfo.albumImageUrl,
                        ),
                      ),
                    ),
                    builder: (BuildContext context, Widget child) {
                      return Transform.rotate(
                        child: child,
                        angle: _animationController.value * 2.0 * math.pi,
                      );
                    },
                  ),
                ),
                Center(
                  child: Text(
                    'information',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
        ),
Expanded(),
Expanded(),
Expanded(),

我编辑并将所有代码放入扩展后的我也把debugPaintSizeEnabled = true;即时通讯链接： https://imge.to/i/fU8vi

Answer 1

用ClipRRect值为1的AspectRatio小部件包装aspectRation小部件。这将强制子小部件为正方形。

或者，如果合适，请使用CircleAvatar小部件，将其子级显示为一个圆圈-这可以替换AspectRatio和ClipRRect小部件。

编辑：这实际上是由于TabBarView出于某种原因强制将其子级显示为全角。将TabBarView的子元素包装在Row中，以便可以水平调整其大小。

如何剪裁圆形？

1 个答案: