如何剪裁圆形?

时间:2019-08-10 15:45:24

标签: flutter dart

我有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

1 个答案:

答案 0 :(得分:0)

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

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

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