欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > 【Flutter】旋转元素(Transform、RotatedBox )

【Flutter】旋转元素(Transform、RotatedBox )

2025/1/30 15:24:39 来源:https://blog.csdn.net/qq_44143906/article/details/145340282  浏览:    关键词:【Flutter】旋转元素(Transform、RotatedBox )

这里写自定义目录标题

  • Transform旋转元素
  • 可以改变宽高约束的旋转 - RotatedBox

Transform旋转元素

说明:Transform旋转操作改变了元素的方向,但并没有改变它的布局约束。因此,虽然视觉上元素看起来是旋转了,但它仍然遵循原始的宽高约束,这可能导致它不能正确地铺满 父元素。

import 'dart:math' as math;Stack(fit: StackFit.expand,children: [LayoutBuilder(builder: (context, constraints) {final double width = constraints.maxWidth;final double height = constraints.maxHeight;return Transform.rotate(angle: math.pi / 2, // 固定 90 度旋转child: Container(color: Colors.red,width: mirror ? height : width, // 根据镜像状态调整宽度height: mirror ? width : height, // 根据镜像状态调整高度child: Icon(Icons.check_box),),);},),],
)

可以改变宽高约束的旋转 - RotatedBox

说明:RotatedBox 是一种不同的旋转方式,它实际上改变了子组件的布局方向,而不是仅仅在绘制时旋转。这意味着它会根据旋转角度重新计算子组件的尺寸和位置,可以应用于旋转后希望铺满父元素的情境。

Stack(fit: StackFit.expand,children: [RotatedBox(quarterTurns: 1, // 90 度等于 1/4 转child: Container(color: Colors.red,width: MediaQuery.of(context).size.width, // 使用原始宽度height: MediaQuery.of(context).size.height, // 使用原始高度child: Icon(Icons.check_box),),),],
)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com