Flutter之Container

1、Container介紹

我們先看它的構造方法

Container({
    Key key,
    this.alignment,
    this.padding, //容器内補白，屬于decoration的裝飾範圍
    Color color, // 背景色
    Decoration decoration, // 背景裝飾
    Decoration foregroundDecoration, //前景裝飾
    double width,//容器的寬度
    double height, //容器的高度
    BoxConstraints constraints, //容器大小的限制條件
    this.margin,//容器外補白，不屬于decoration的裝飾範圍
    this.transform, //變換
    this.child,
    this.clipBehavior = Clip.none,
  })      

Container是一個組合類容器，它本身不對應具體的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等元件組合的一個多功能容器，是以我們隻需通過一個Container元件可以實作同時需要裝飾、變換、限制的場景

2、代碼測試

代碼測試1、

@override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Container(
               margin: EdgeInsets.only(top: 50, left: 50),
               constraints: BoxConstraints.tightFor(width: 200, height: 150),
               decoration: BoxDecoration(
                    gradient: RadialGradient( //背景徑向漸變
                        colors: [Colors.red, Colors.orange],
                        center: Alignment.topLeft,
                        radius: .98
                    ),
                    borderRadius:BorderRadius.all(Radius.circular(5)),
                    boxShadow: [ //卡片陰影
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2.0, 2.0),
                          blurRadius: 4.0
                      )
                    ]
               ),
               alignment: Alignment.center,
               child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
            ),
          ),
      );
  }      

代碼測試2、

@override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Padding(
              padding: EdgeInsets.all(30),
              child: DecoratedBox(
                decoration: BoxDecoration(
                   color: Colors.blue
                ),
                child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
              ),
            )
          ),
      );
  }      

代碼測試3、

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'open url',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello flutter'),
          ),
          body: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.blue
            ),
            child: Padding(
               padding: EdgeInsets.all(40),
               child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
            ),
          ),
      ),
    );
  }      

代碼測試4、

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'open url',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello flutter'),
          ),
          body: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("chenyu1"),
              Text("chenyu2"),
              Container(
                margin: EdgeInsets.all(20),
                color: Colors.red,
                child: Text("chenyu3", style: TextStyle(fontSize: 40, color: Colors.white)),
              ),
              Container(
                padding: EdgeInsets.all(20),
                color: Colors.red,
                child: Text("chenyu4", style: TextStyle(fontSize: 40, color: Colors.white)),
              ),
            ],
          ),
      ),
    );
  }      

3、運作結果

4、總結

Container(
  margin: EdgeInsets.all(20.0), //容器外補白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器内補白
  color: Colors.orange,
  child: Text("Hello world!"),
),      

等價下面的代碼

Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),