Flutter中常用的组件-RotatedBox

最新推荐文章于 2025-05-10 14:54:50 发布

原创最新推荐文章于 2025-05-10 14:54:50 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter 专栏收录该内容

19 篇文章

订阅专栏

该文展示了如何使用Flutter中的RotatedBox组件来旋转子部件。通过设置quarterTurns属性，可以将Text或其他小部件顺时针或逆时针旋转90度。此外，还提到了quadTurns参数对旋转方向的影响，并提供了一个LinearProgressIndicator旋转示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 new Column(
        children: [
//RotatedBox 是一个小部件，可将其子部件旋转四分之一圈。每个四分之一是 90 度或 -90 度的角度
          new RotatedBox(
            //RotatedBox 将 Text 对象顺时针旋转 90 度(quarterTurns  = 1)
            quarterTurns: 1, child: new Text("韩国撒娇"),
          ),
          new RotatedBox(
            //默认水平
            quarterTurns: 0, child: new Text("韩国撒娇"),
          ),
          new RotatedBox(
            //将 Text 对象逆时针旋转 90 度(quarterTurns = -1)。
            quarterTurns: -1, child: new Text("韩国撒娇"),
          ),
          new RotatedBox(
            //quadTurns 是子部件必须顺时针旋转 90 度的次数。quadTurns 的值可以是负整数。
            //quadTurns:-2 横轴左转90度，纵轴正向
            //quadTurns:-1 横轴右转90度,纵轴正向
            //quadTurns:2 横轴左转90度,纵轴负向
            //quadTurns:-1 横轴右转90度,纵轴负向

            quarterTurns: 0,
            child: new SizedBox(
              width: 40,
              height: 200,
              child: LinearProgressIndicator(
                color: Colors.teal,
                backgroundColor: Colors.blue,
                valueColor: new AlwaysStoppedAnimation(Colors.amber),
              ),
            ),
          )
        ],
      ),