Flutter：如何让倾斜日历图标适配Card且仅70-80%显示其中？

核心解决方案 #

要保持图标倾斜角度且让70%-80%显示在Card内，只需做以下关键调整：

1. 给Card添加裁剪属性，自动裁剪内部超出边界的内容
2. 调整图标旋转原点，让旋转后的图标更贴合Card右下角
3. 微调尺寸参数，精准控制显示比例

修改后的完整代码 #

GestureDetector(
  onTap: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => Calendarview()));
  },
  child: WidgetAnimator(
    incomingEffect: WidgetTransitionEffects.incomingSlideInFromBottom(duration: Duration(seconds: 1)),
    child: Card(
      color: Colors.blueAccent,
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25),
      ),
      margin: const EdgeInsets.all(8),
      // 让Card裁剪内部溢出的内容
      clipBehavior: Clip.hardEdge,
      child: Stack(
        clipBehavior: Clip.antiAlias,
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: SizedBox(
              width: 110,
              height: 110,
              child: Transform.rotate(
                // 设置旋转原点，让图标旋转时以右下角附近为中心
                origin: const Offset(80, 80),
                angle: 320 * pi / 180,
                child: Icon(
                  Icons.calendar_month,
                  size: 120,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
),

参数说明 #

• clipBehavior: Clip.hardEdge：这是解决溢出的核心，Card会自动裁剪掉超出自身边界的部分，不再显示外部的图标区域
• origin: Offset(80, 80)：修改旋转原点为图标右下角附近，旋转后图标会更贴合Card的右下角，更容易控制显示在Card内的比例
• 如果显示比例不符合预期，可以微调origin的数值、SizedBox的宽高或者图标size，直到达到70%-80%的效果

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