Flutter如何隐藏Container半区 仅展示半部分圆形FortuneWheel幸运转盘

需求说明 #

我有一个圆形的FortuneWheel幸运转盘，当前该组件会占满全屏，我希望仅展示转盘的半部分，将另一半区域隐藏，同时可以在页面放置功能按钮，具体效果可参考下方示例图片：

原有实现代码 #

body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              flex: 1,
              child: FortuneWheel(
                duration: Duration(seconds: 3),
                animateFirst: false,
                selected: selected.stream,
                items: [
                  FortuneItem(
                      child: Text('0'),
                      style: FortuneItemStyle(
                          color: Colors.green,
                          textStyle: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 15))),
                  FortuneItem(
                      child: Text('32'),
                      style: FortuneItemStyle(
                        color: Colors.grey,
                      )),
                  FortuneItem(child: Text('15')),
                  FortuneItem(child: Text('19')),
                  FortuneItem(child: Text('4')),
                  FortuneItem(child: Text('21')),
                  FortuneItem(child: Text('2')),
                ],
              ),
            ),
          ],
        ),
      ),

实现方案 #

通过裁剪组件限制转盘的显示区域即可达到效果，核心是使用ClipRect配合Align组件裁剪掉不需要展示的半部分转盘，剩余的页面空间可以直接放置功能按钮。
修改后的代码如下：

body: Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 半屏展示转盘区域
    Expanded(
      flex: 1,
      child: ClipRect(
        child: Align(
          // 对齐顶部，裁剪下半部分
          alignment: Alignment.topCenter,
          // 仅显示原高度的50%，即上半部分
          heightFactor: 0.5,
          child: FortuneWheel(
            duration: Duration(seconds: 3),
            animateFirst: false,
            selected: selected.stream,
            items: [
              FortuneItem(
                  child: Text('0'),
                  style: FortuneItemStyle(
                      color: Colors.green,
                      textStyle: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 15))),
              FortuneItem(
                  child: Text('32'),
                  style: FortuneItemStyle(
                    color: Colors.grey,
                  )),
              FortuneItem(child: Text('15')),
              FortuneItem(child: Text('19')),
              FortuneItem(child: Text('4')),
              FortuneItem(child: Text('21')),
              FortuneItem(child: Text('2')),
            ],
          ),
        ),
      ),
    ),
    // 下方功能按钮区域，可自定义添加任意组件
    Container(
      padding: EdgeInsets.all(20),
      child: ElevatedButton(
        onPressed: () {
          // 转盘启动逻辑
        },
        child: Text("开始抽奖"),
      ),
    )
  ],
),

补充说明 #

如果需要展示下半部分转盘，只需要把Align的alignment参数改为Alignment.bottomCenter即可。heightFactor参数可以根据需要调整显示比例，设置为0.5就是刚好显示半屏。

内容的提问来源于stack exchange，提问作者sid heart