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、

  @overrideWidget 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、

    @overrideWidget 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、

    @overrideWidget 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、

  @overrideWidget 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!"),),
),

?

?

?

?

?

?