Flutter scaffold組件的屬性與方法

Scaffold 是承載material design 控件的佈局控件,能夠展現drawers、snack bars、bottom sheets。每一個頁面的佈局都是在這裏面。至關於iOS中UIViewController中的self.view。

屬性介紹:app

屬性名 類型 說明
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,
            ),
          )
        ],
      ),
)
相關文章
相關標籤/搜索