Flutter RotatedBox 旋转组件

最新推荐文章于 2024-08-07 15:33:27 发布

早起的年轻人

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量4.3k

点赞数 1

分类专栏： Flutter项目开发全套教程文章标签： flutter android ios

本文链接：https://blog.csdn.net/zl18603543572/article/details/115238021

版权

Flutter项目开发全套教程专栏收录该内容

265 篇文章 387 订阅

订阅专栏

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

RotatedBox 组件用来旋转其子 Widget 的功能，会影响子 Widget 实际的布局，基本使用代码如下：

RotatedBox(
   //旋转的倍数
   quarterTurns: 1,
   //旋转的子Widget
   child: Container(...),
)

参数 quarterTurns 用来配置旋转的倍数，正值为顺时针，负数为逆时针，然后实际旋转的角度为90的倍数，在组件 layout 排版过程阶段起作用，也就是实际影响位置。

在这里插入图片描述

class DemoRotatedBoxPage extends StatefulWidget {
  @override
  _DemoRotatedBoxPageState createState() => _DemoRotatedBoxPageState();
}

class _DemoRotatedBoxPageState extends State<DemoRotatedBoxPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RotatedBox 旋转"),
      ),
      backgroundColor: Colors.white,
      ///填充布局
      body: Container(
        padding: EdgeInsets.only(top: 100, left: 100, right: 100),
        child: Row(
          children: [buildRotate()],
        ),
      ),
    );
  }

  buildRotate() {
    return RotatedBox(
      //旋转的倍数
      quarterTurns: 1,
      //旋转的子Widget
      child: Container(
        child: Text(
          'Hello World!',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        color: Colors.blueGrey,
      ),
    );
  }
}

2 Transform.rotate 实现的旋转

在这里插入图片描述

class _DemoRotatedBoxPageState extends State<DemoRotatedBoxPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RotatedBox 旋转"),
      ),
      backgroundColor: Colors.white,
      ///填充布局
      body: Container(
        padding: EdgeInsets.only(top: 100, left: 100, right: 100),
        child: Row(
          children: [buildTransform()],
        ),
      ),
    );
  }
  buildTransform() {
    return Transform.rotate(
      //旋转的弧度
      angle: pi/2,
      //旋转的子Widget
      child: Container(
        child: Text(
          'Hello World!',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        color: Colors.blueGrey,
      ),
    );
  }
 }