flutter - 如何剪裁圆形？

Question

我有 Column，在里面我使用了 7 个 Expanded 小部件，其中之一是 ClipRRect，但是有一个问题:它不是圆。

我认为有两种方式:

1. 用容器包裹它并为其宽度赋予它的高度值，但我不知道该怎么做？

2. 使用其他小部件？

当我使用 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

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

或者，如果合适的话，使用一个 CircleAvatar 小部件，它在一个圆圈中显示它的 child - 这可以替代 AspectRatio 和 ClipRRect小部件。

编辑:这实际上是因为 TabBarView 出于某种原因强制其子元素为全宽。将 TabBarView 的子元素包裹在一个 Row 中，这样它就可以水平调整自己的大小。