flutter container组件构成

19 阅读1分钟

类似web里面盒子模型由外至内
Transform->外Padding->外ConstrainedBox->前景DecoratedBox->DecoratedBox->ClipPath->ColoredBox->内Padding->Align->(LimitedBox ConstrainedBox)

  1. LimitedBox ConstrainedBox BoxConstraints.expand()
  2. Align
  3. Padding
  4. ColoredBox
  5. ClipPath
  6. DecoratedBox
  7. DecoratedBox(foregroundDecoration)
  8. ConstrainedBox
  9. Padding(margin)
  10. Transform
 Container(
            transform: Matrix4.rotationZ(0.5),
            margin: EdgeInsets.all(10),
            constraints: BoxConstraints(maxWidth: 200, maxHeight: 200),
            // foregroundDecoration: BoxDecoration(
            //   color: Colors.red.withOpacity(0.3),
            //   borderRadius: BorderRadius.circular(10),
            // ),
            decoration: BoxDecoration(
              color: Colors.amberAccent,
              borderRadius: BorderRadius.circular(10),
            ),
            clipBehavior: Clip.antiAlias,
            // color: Colors.grey,
            padding: EdgeInsets.all(30),
            alignment: Alignment.topLeft,

            width: 100,
            height: 100,
            child: Text("123"),
          ),