容器大小
容器边距
位置信息
容器边框
容器圆角
阴影效果

在 Flutter 中的组件样式，都是通过组件上的 style 属性进行设置的，这与 React Native 很类似。
例如，在 Text 组件里设置样式。

new Text('Hello',
    style: new TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.w900,
        fontFamily: "Georgia",
    )
);

                                                       ![image.png](https://cdn.nlark.com/yuque/0/2019/png/164272/1556115676773-d3ab7eb9-55a6-441b-b225-553833c8adfc.png#align=left&display=inline&height=190&name=image.png&originHeight=190&originWidth=189&size=19725&status=done&width=189)

与 React Native 不同的是，有一些样式不不能在 style 里面设置的。例如 width，height，color 等属性。因为 Flutter 认为这样应该是组件的属性而不是样式。

new Text(
    'Hello',
    style: new TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.w900,
        fontFamily: "Georgia",
    ),
    textAlign: TextAlign.center,
)

容器大小

var container = new Container(
    width: 320.0,
    height: 240.0,
);

容器边距

边距只要是 padding（内边距）和 margin（外边距）两个设置。边距只适用于 Container。

new Container(
    padding: new EdgeInsets.all(20.0),
    // padding: 20px;
    padding: new EdgeInsets.only(left: 30.0, right: 0.0, top: 20.0, bottom: 20.0),
    // padding-left: 30px;
    // padding-right: 0;
    // padding-top: 20px;
    // padding-bottom: 20px;
    padding: new EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
    // padding: 10px 20px;
    // 同理，对于 margin 也是一样
    margin: new EdgeInsets.all(20.0),
)

位置信息

如果要使用绝对定位，那么需要把内容包裹在 Positioned 容器里，而 Positioned 又需要包裹在 Stack 容器里。

var container = new Container(
    child: new Stack(
        children: [
            new Positioned(
                child:  new Container(
                    child: new Text("Lorem ipsum"),
                ),
                left: 24.0,
                top: 24.0,
            ),
        ],
    ),
    width: 320.0,
    height: 240.0,
);

容器边框

容器的边框设置，使用 Border 对象。边框只适用于 Container。

decoration: new BoxDecoration(
    color: Colors.red[400],
    // 这里设置
    border: new Border.all(width: 2.0, style: BorderStyle.solid),
),

容器圆角

要设置容器的圆角，使用 BorderRadius 对象，它只能使用于 Container。

new Container(
    decoration: new BoxDecoration(
        color: Colors.red[400],
        // 这里设置
        borderRadius: new BorderRadius.all(
            const Radius.circular(8.0),
        ),
    ),
    padding: new EdgeInsets.all(16.0),
),

BorderRadius 有以下的属性与方法。

BorderRadius.all() - 创建所有半径的边界半径 radius。
BorderRadius.circular() - 同时设置四个圆角。
BorderRadius.horizontal() - 在水平方向上设置圆角。
BorderRadius.only() - 只设置某个角。

BorderRadius.vertical() - 在垂直方向上设置圆角。
borderRadius: new BorderRadius.circular(5.0));

阴影效果

在 Flutter 里设置阴影效果，需要使用 BoxShadow 对象。阴影效果只适用于 Container。

decoration: new BoxDecoration(
  color: Colors.red,
  boxShadow: <BoxShadow>[
      new BoxShadow (
          offset: new Offset(0.0, 2.0),   // (x, y)
          blurRadius: 4.0,
          color: const Color(0xcc000000),
      ),
      new BoxShadow (
          offset: new Offset(0.0, 6.0),
          blurRadius: 20.0,
          color: const Color(0x80000000),
      ),
  ],
),

等效于 css 上的阴影效果设置。

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
          0 6px 20px rgba(0, 0, 0, 0.5);

玩物丧记