包装组件

包装组件.png Decoration 装饰.png

Transform 变换在绘制阶段，而非布局(layout)阶段，所以无论对子组件怎么变化，其占用空间的大小和位置都是固定不变，因为这些是在布局阶段就确定的。RotatedBox和Transform.rotate功能相似，都可对子组件进行旋转变换，但RotatedBox的变换是在layout阶段。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('包装组件'),
        ),
        body: Column(children: [
          //或者使用装饰容器 DecoratedBox
          Container(
            width: 100,
            height: 100,
            //设置子元素对齐方式
            alignment: Alignment.center,
            //设置内边距
            padding: const EdgeInsets.all(2),
            //设置外边距
            margin: const EdgeInsets.only(top: 10.0),
            //设置倾斜
            transform: Matrix4.rotationZ(0.2),
            decoration: BoxDecoration(
                //形状
                shape: BoxShape.rectangle,
                //背景渐变
                gradient: RadialGradient(
                    colors: [Colors.red, Colors.orange.shade700]),
                //3像素圆角
                borderRadius: BorderRadius.circular(3.0),
                boxShadow: const [
                  //阴影
                  BoxShadow(
                      color: Colors.black54,
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0)
                ]),
            child: const Text("欢迎学习Flutter"),
          ),

          Container(
            color: Colors.black,
            margin: const EdgeInsets.only(top: 50.0, bottom: 10),
            child: Transform(
              alignment: Alignment.topRight,
              transform: Matrix4.skewY(0.3),
              child: Container(
                padding: const EdgeInsets.all(8.0),
                color: Colors.deepOrange,
                child: const Text('你好Flutter!'),
              ),
            ),
          ),

          const DecoratedBox(
            decoration: BoxDecoration(color: Colors.blue),
            //将Transform.rotate换成RotatedBox
            child: RotatedBox(
              //旋转90度
              quarterTurns: 1,
              child: Text("旋转测试"),
            ),
          ),
        ]));
  }
}