Flutter scaffold元件的屬性與方法
阿新 • • 發佈:2020-08-20
Scaffold 是承載material design 控制元件的佈局控制元件,可以展示drawers、snack bars、bottom sheets。每個頁面的佈局都是在這裡面。相當於iOS中UIViewController中的self.view。
屬性介紹:
屬性名 | 型別 | 說明 |
---|---|---|
appBar | AppBar | 顯示在介面頂部的一個AppBar |
body | Widget | 當前介面所顯示的主要內容 |
floatingActionButton | Widget | 在Material Design 中定義的一個功能 |
persistentFooterButtons | List | 固定在下方顯示的按鈕 |
drawer | Widget | 側邊欄元件 |
bottomNavigationBar | Widget | 顯示在底部的導航欄按鈕 |
backgroundColor | Color | 當前介面所顯示的主要內容 |
body | Widget | 背景色 |
resizeToAvoidBottomPadding | bool | 控制介面內容body是否重新佈局來避免底部被覆蓋,比如當鍵盤顯示時,重新佈局避免被鍵盤蓋住內容。預設值為true |
程式碼如下:
new Scaffold( appBar: new AppBar( title: new Text('文字元件'), ), backgroundColor: Colors.grey, bottomNavigationBar: BottomAppBar( child: Container( height: 50.0, ), ), floatingActionButton: FloatingActionButton( onPressed: () {}, tooltip: '增加', child: Icon(Icons.add), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, body: new Column( children:<Widget>[ new Text( '紅色+黑色刪除線+25號', style: new TextStyle( color: const Color(0xffff0000), decoration: TextDecoration.lineThrough, decorationColor: const Color(0xff000000), fontSize: 25.0), ), new Text( '橙色+下劃線+24號', style: new TextStyle( color: const Color(0xffff9900), decoration: TextDecoration.underline, fontSize: 24.0, ), ), new Text( '虛線上劃線+23號+傾斜', style: new TextStyle( decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.dashed, fontSize: 23.0, fontStyle: FontStyle.italic, ), ), new Text( '24號+加粗', style: new TextStyle( fontSize: 23.0, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold, letterSpacing: 6.0, ), ) ], ), )