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

这里写自定义目录标题

  • Transform旋转元素
  • [可以改变宽高约束的旋转 - RotatedBox](#可以改变宽高约束的旋转 - RotatedBox)

Transform旋转元素

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

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

dart 复制代码
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),
      ),
    ),
  ],
)
相关推荐
—Qeyser5 小时前
Flutter bottomNavigationBar 底部导航栏
flutter
ZFJ_张福杰5 小时前
【Flutter】APP的数据安全(基于Flutter 交易所APP的总结)
flutter·web3·区块链·app·交易所
Bryce李小白4 天前
Flutter 自定义 View 权威指引
flutter
恋猫de小郭4 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
SoaringHeart5 天前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
许泽宇的技术分享5 天前
Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技术奥秘
人工智能·flutter
molihuan5 天前
开源 全平台 哔哩哔哩缓存视频合并 Github地址:https://github.com/molihuan/hlbmerge_flutter
android·flutter·缓存·ffmpeg·开源·github·音视频
dora5 天前
Flutter中dart和原生代码的通信之MethodChannel
android·flutter
brave7236 天前
Riverpod 3.0.0 版本中 Provider 类型选择指南
flutter
ZFJ_张福杰6 天前
【区块链】Fiat24 深度解读(含 Flutter 集成与 SDK 骨架)
flutter·web3·区块链·钱包