flutter 布局基础

 Container-div
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
      color: gridItem.color, borderRadius: BorderRadius.circular(8)),

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
  ...
})

EdgeInsets.all(8),

• fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
• all(double value) : 所有方向均使用相同数值的填充。
• only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
• symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right

BoxDecoration({
  Color color, //颜色
  DecorationImage image,//图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List boxShadow, //阴影,可以指定多个
  Gradient gradient, //渐变
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形状
})

 旋转布局

DecoratedBox(
            decoration: BoxDecoration(),
            child: Transform.rotate(
              //旋转90度
              angle: math.pi / 2,
              child: PopupMenuButton(itemBuilder: (context) {
                return [
                  const PopupMenuItem(child: Text('扫一扫')),
                ];
              }),
            ),
          )

注意：要使用math.pi需先进行如下导包。

import 'dart:math' as math;