Flutter 容器Container的常規使用

實現效果：

代碼中有註釋，看註釋
1.Container實現背景圖片，圓角，內容居中，角度旋轉，邊框設置，margin,padding,寬度擠滿父容器

new Container(
          decoration: new BoxDecoration(
            //color: Colors.purple,//背景色
            //背景設置
            border: Border.all(color: Colors.blue, width: 5),
            //圓角角度
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            //背景圖片
            image: new DecorationImage(
              image: new NetworkImage(
                  'http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg'),
              centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
          width: double.maxFinite,//寬度擠滿符容器
          height: 150,//高度，不設置默認爲子裝置高度
          margin: EdgeInsets.all(20),//margin
          padding: EdgeInsets.all(30),//padding
          //子widget排列方式
          alignment: Alignment.center,
          child: Text(
            '粉色按鈕',
            style: TextStyle(
                fontSize: 35,
                color: Colors.white,
                backgroundColor: Colors.black),
          ),
        ),

2.Container實現圓角按鈕
添加事件監聽【常規情況是監聽容器中的某一個wiget的點擊事件】

onClick(String label) {
    print("點擊:" + label);
    setState(() {
      title = label + '點擊後';
    });
  }
  ...
  new Container(
          width: double.maxFinite,
          decoration: BoxDecoration(
              color: Colors.purple,
              borderRadius: BorderRadius.all(Radius.circular(50))),
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.all(30),
          alignment: Alignment.center,
          //手勢檢測器——添加事件監聽
          child: new GestureDetector(
            //可以這樣實現
//            onTap: () {
//              onFthClick("紫色按鈕");
//            },
            onTap: () => onClick("紫色按鈕"),
            child: new Text(
              title,
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),