Flutter入門--Scaffold

Scaffold 翻譯過來就是腳手架的意思,它實現了基本的 Material Design 可視化布局結構。此類提供了用于顯示drawer、snackbar和底部sheet的API。簡單的說,Scaffold就是一個提供 Material Design 設計中基本布局的 widget。

const Scaffold({
  Key key,
  this.appBar, // 標題欄
  this.body,  // 用于顯示當前界面主要內容的Widget
  this.floatingActionButton, // 一個懸浮在body上的按鈕,默認顯示在右下角
  this.floatingActionButtonLocation, // 用于設置floatingActionButton顯示的位置
  this.floatingActionButtonAnimator, // floatingActionButton移動到一個新的位置時的動畫
  this.persistentFooterButtons, // 多狀態按鈕
  this.drawer, // 左側的抽屜菜單
  this.endDrawer, //  右'側的抽屜菜單
  this.bottomNavigationBar,// 底部導航欄。
  this.bottomSheet, // 顯示在底部的工具欄
  this.backgroundColor,// 內容的背景顏色
  this.resizeToAvoidBottomPadding = true, // 控制界面內容 body 是否重新布局來避免底部被覆蓋,比如當鍵盤顯示的時候,重新布局避免被鍵盤蓋住內容。
  this.primary = true,// Scaffold是否顯示在頁面的頂部
}) 

Flutter入門--MaterialApp 中我們僅僅用到了Scaffold的appBar和body參數,下面我們來看看其他參數的作用。

floatingActionButton


其實很簡單,只要新增一個參數就可以了

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: Center(
        child: Text('Hello Flutter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Text('點擊'),
      ),
    );
  }
}

和Scaffold類似 floatingActionButto 也有很多參數,但是基本上大多都是可以省略的,只有onPressed是必須的,需要注意的是當onPressed傳入的是null的時候表示按鈕是被禁用的。

deawer

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: Center(
        child: Text('Hello Flutter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('點擊'),
      ),
      drawer: Drawer(
        child: Center(
          child: Text('Drawer'),
        ),
      ),
    );
  }
}

添加 Drawer 控件后,程序會默認在標題欄左側添加一個圖標按鈕

此時我們可以通過 點擊按鈕 或通過 左滑 的方式喚出Drawer控件

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容