在 Flutter 中的組件樣式，都是通過組件上的 style 屬性進行設(shè)置的，這與 React Native 很類似。

例如，在 Text 組件里設(shè)置樣式。

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

與 React Native 不同的是，有一些樣式不不能在 style 里面設(shè)置的。例如 width，height，color 等屬性。因為 Flutter 認(rèn)為這樣應(yīng)該是組件的屬性而不是樣式。

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（內(nèi)邊距） 和 margin（外邊距）兩個設(shè)置。邊距只適用于 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),
)

位置信息

如果要使用絕對定位，那么需要把內(nèi)容包裹在 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,
);

容器邊框

容器的邊框設(shè)置，使用 Border 對象。邊框只適用于 Container。

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

容器圓角

要設(shè)置容器的圓角，使用 BorderRadius 對象，它只能使用于 Container。

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

BorderRadius 有以下的屬性與方法。

• BorderRadius.all() - 創(chuàng)建所有半徑的邊界半徑 radius。
• BorderRadius.circular() - 同時設(shè)置四個圓角。
• BorderRadius.horizo??ntal() - 在水平方向上設(shè)置圓角。
• BorderRadius.only() - 只設(shè)置某個角。
• BorderRadius.vertical() - 在垂直方向上設(shè)置圓角。
  borderRadius: new BorderRadius.circular(5.0));

陰影效果

在 Flutter 里設(shè)置陰影效果，需要使用 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 上的陰影效果設(shè)置。

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