Rotating components

computerclass

于 2021-03-20 19:11:19 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/computerclass/article/details/115032929

flutter 专栏收录该内容

220 篇文章

订阅专栏

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

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

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],
);