flutter - 如何剪裁圆形？

Question

我有Column并且在里面我使用了 7Expanded个小部件，其中一个是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

标签： flutterdart

Answer 1

用值为 1的小部件包装您ClipRRect的小部件。这会强制子小部件为方形。AspectRatioaspectRation

或者，如果合适，使用一个CircleAvatar以圆圈显示其子项的小部件 - 这可以同时替换 theAspectRatio和ClipRRect小部件。

编辑：这实际上是因为TabBarView它出于某种原因迫使它的孩子是全宽的。将子元素包裹TabBarView在 a 内，Row以便它可以水平调整自身大小。