import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(title: Text("布局练习"),),
        body: MyContainer(),
      ),
    );
  }
}


class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffff4400),
    //  child: Text("我是一个Container容器"),
    );
  }
}

1:默认情况下他是会铺满父元素,这里只给个color,看看效果

2:设置了高度和宽度,也设置了子元素的对齐方式

Container(
      width:300,//宽度
      height:300,//高度
      color: Color(0xffff4400),//背景颜色     
      alignment:Alignment.center,//子组件的对齐方式
     child: Text("我是一个Container容器",style: TextStyle(color: Color(0xffffffff),fontSize: 20),),
    );

效果图:

3:设置 decoration属性,他需要New BoxDecoration实例 由于这个里面的参数比较多,我打算把他做为2次来讲解,主要依据能否展现效果来决定写那些参数

在罗索下:

shape: BoxShape.circle 则为圆形,我看视频里很多老师都在设置高度后用圆角来实现,实在是多此一举,

 Center(
      child: Container(
              width:300,//宽度
              height:300,//高度
              //color: Color(0xffff4400),//背景颜色     
              alignment:Alignment.center,//子组件的对齐方式              
              decoration:new BoxDecoration(
                // this.color, // 底色
                // this.image, // 图片
                // this.border, 边色
                // this.borderRadius, // 圆角度
                // this.boxShadow, // 阴影
                // this.gradient, // 渐变
                // this.backgroundBlendMode, // 混合Mode
                // this.shape = BoxShape.rectangle,  // 形状
                border: new Border.all(color: Color(0xFFFF0000), width: 5), // 边色与边宽度
                color: Color(0xffff4400),//背景颜色
                //borderRadius: new BorderRadius.circular((20.0)), // 圆角度
                borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可控制上面或下面单个圆角大小
                // 生成阴影，阴影位置由offset决定(x,y),阴影模糊层度由blurRadius大小决定（大就更透明更扩散），阴影模糊大小由spreadRadius决定,这里可以生成多重阴影直接在BoxShadow后面在增加和BoxShadow即可
                boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(15.0, 15.0),    blurRadius: 10.0, spreadRadius: 2.0)],
                shape: BoxShape.rectangle //设置container的形状为圆形,默认为矩形,BoxShape.circle为圆形 注意这个和 borderRadius 参数互斥不能同事使用,因为圆没有圆角可设置
                
                
              ), //实现边框、圆角、阴影、形状、渐变、背景图像
              child: Text("我是一个Container容器",style: TextStyle(color: Color(0xffffffff),fontSize: 20),),
            ),
      );

效果图:

4:渐变和背景图片

通过这个我发现很容易就可以在图片上面写上文字....

Container(
              width:300,//宽度
              height:300,//高度
              //color: Color(0xffff4400),//背景颜色     
              alignment:Alignment.center,//子组件的对齐方式              
              decoration:new BoxDecoration(
                // this.color, // 底色
                // this.image, // 图片
                // this.border, 边色
                // this.borderRadius, // 圆角度
                // this.boxShadow, // 阴影
                // this.gradient, // 渐变
                // this.backgroundBlendMode, // 混合Mode
                // this.shape = BoxShape.rectangle,  // 形状
                border: new Border.all(color: Color(0xFFFF0000), width: 5), // 边色与边宽度
                //color: Color(0xffff4400),//背景颜色
                //borderRadius: new BorderRadius.circular((20.0)), // 圆角度
                //borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可控制上面或下面单个圆角大小
                // 生成阴影，阴影位置由offset决定(x,y),阴影模糊层度由blurRadius大小决定（大就更透明更扩散），阴影模糊大小由spreadRadius决定,这里可以生成多重阴影直接在BoxShadow后面在增加和BoxShadow即可
                boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(15.0, 15.0),    blurRadius: 10.0, spreadRadius: 2.0)],
                shape: BoxShape.rectangle, //设置container的形状为圆形,默认为矩形,BoxShape.circle为圆形 注意这个和 borderRadius 参数互斥不能同事使用,因为圆没有圆角可设置
                
                // 环形渲染 radius:1 中心到边框是1 输入1为从中心渲染到边框,本人英文不好不知道理解的对不对
                gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror),
                //扫描式渐变
                //  gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14),
                // 线性渐变
                //  gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1)),


                //背景图片 更多的方法可以看我写的图片练习
                image: new DecorationImage(
                    image: new NetworkImage('http://www.jspkongjian.com/images/logo180.70.png'), // 网络图片
                    // image: new AssetImage('graphics/background.png'), 本地图片
                    fit: BoxFit.fill // 填满
                    //centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小                   
                )



              ), //实现边框、圆角、阴影、形状、渐变、背景图像
              child: Text("我是一个Container容器",style: TextStyle(color: Color(0xffffffff),fontSize: 20),),
            ),

效果图: