Rotating components

最新推荐文章于 2025-12-03 10:58:45 发布

原创最新推荐文章于 2025-12-03 10:58:45 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文展示了一个使用Flutter实现的带有旋转效果的文本框示例。该示例中，文本框被放置在一个灰色背景的容器内，并通过Transform组件实现了15度的旋转倾斜效果。文本内容为“Lorem ipsum”，并采用了居中对齐方式。

var container = Container( // gray box
  child: Center(
    child:  Transform(
      child:  Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        padding: EdgeInsets.all(16),
      ),
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);