一统天下 flutter - widget 容器类(只能有一个子): RotatedBox - 旋转

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 容器类(只能有一个子): RotatedBox - 旋转

示例如下:

lib\widget\container\rotated_box.dart

/*
 * RotatedBox - 旋转
 *
 * RotatedBox 旋转的单位是 1/2 弧度,旋转之后再布局
 * Transform 旋转的单位是任意弧度,布局之后再旋转
 */

import 'package:flutter/material.dart';

import 'dart:math' as math;

class RotatedBoxDemo extends StatelessWidget {
  const RotatedBoxDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            /// 旋转之后再布局
            child: RotatedBox(
              quarterTurns: 1, /// 旋转的单位是 1/2 弧度
              child: Container(
                color: Colors.green,
                child: const Text('webabcd'),
              ),
            ),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.red,
            /// 布局之后再旋转
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.rotationZ(math.pi / 2),
              child: Container(
                color: Colors.green,
                child: const Text('webabcd'),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-04-26 17:01  webabcd  阅读(24)  评论(0编辑  收藏  举报