1. 程式人生 > 實用技巧 >Flutter scaffold元件的屬性與方法

Flutter scaffold元件的屬性與方法

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, ), ) ], ), )