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