關於Flutter按鈕Shape設置及效果

一個老實的程序猿，都是直接進入主題：

Button 設置效果 和 一些樣式類使用

BorderSide 內得設置

style: BorderStyle.none 設置顏色 是無效得

style: BorderStyle.solid 設置延是是有效得

ShapeBorder類的使用

BoxBorder 能夠繪製爲矩形、圓形或圓形的框邊框的基類

源碼：abstract class BoxBorder extends ShapeBorder 不能實現

BeveledRectangleBorder 扁平或「斜角」角的矩形邊框

new Center(
            child: new Container(
              width: 300.0,
              height: 48.0  ,
              child: new RaisedButton(onPressed: (){

              },color: Colors.grey,
                child: new Text("登錄"),

              shape: new BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0),side: new BorderSide(
                style: BorderStyle.none,
              )),
              ),
            )
          ),
複製代碼

CircleBorder 可用空間內適合圓的邊界

顯示圓的Button

new Center(
    child: new Container(
        width: 300.0,
        height: 80.0  ,
        child: new RaisedButton(onPressed: (){

        },color: Colors.grey,
            child: new Text("登錄"),
            //shape:new RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)) ,
            shape: new CircleBorder(side: new BorderSide(
            //設置 界面效果
            color: Colors.green,
            width: 80.0,
            style: BorderStyle.none,
         ),),
        ),
     )
),
複製代碼

StadiumBorder 半圓角矩形（StadiumBorder 翻譯：像體育場形狀的邊框）

如上圖 屬性 color: Color(0xffFF7F24), 得效果 配合 style: BorderStyle.solid,

new Center(
            child: new Container(
              width: 300.0,
              height: 48.0  ,
              child: new RaisedButton(onPressed: (){

              },color: Colors.grey,
                child: new Text("登錄"),
              shape: new StadiumBorder(side: new BorderSide(
                style: BorderStyle.solid,
                color: Color(0xffFF7F24),
              )),
              ),
            )
          ),
複製代碼

RoundedRectangleBorder 半圓角的矩形邊框

若是 RoundedRectangleBorder 設置了屬性(borderRadius: BorderRadius.circular(20.0)) 就和 StadiumBorder 差很少得形狀 （半圓角矩形）

而後經過shape屬性的 RoundedRectangleBorder 對圓角進行設置，以下：

new Center(
    child: new Container(
        width: 300.0,
        height: 48.0  ,
        child: new RaisedButton(onPressed: (){

        },color: Colors.grey,
            child: new Text("登錄"),
            shape:new RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)) ,

       ),
    )
),
複製代碼