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控件