Flutter深入淺出元件篇---Scaffold

Jimi發表於2021-08-22

Scaffold介紹

Scaffold 我們通常俗稱為腳手架，在前面的文章中我們說到，Material 元件（MDC）幫助開發者實現 Material Design，Scaffold 實現了基本的 Material Design 佈局結構。在 Material 設計中定義的單個介面上的各種佈局元素，在 Scaffold 中都支援。

Scaffold在什麼情況下使用

在每一個頁面中基本都需要用到Scaffold ，除非當你的頁面不需要導航區，但仍希望您使用 Scaffold 來作為每個頁面的頂級元件。

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案原始碼地址，或者通過視訊教程檢視視訊教程地址

Scaffold屬性和說明

總共23個屬性

欄位	屬性	描述
appBar	PreferredSizeWidget	顯示腳手架的頂部導航區
body	Widget	顯示腳手架的主要內容
floatingActionButton	Widget	懸浮按鈕，位於右下角
floatingActionButtonLocation	FloatingActionButtonLocation	決定懸浮按鈕的位置
floatingActionButtonAnimator	FloatingActionButtonAnimator	決定懸浮按鈕的動畫
persistentFooterButtons	List	顯示在腳手架底部的一組按鈕
drawer	Widget	左側抽屜選單元件
onDrawerChanged	DrawerCallback	左側抽屜選單改變事件回撥
endDrawer	Widget	右側抽屜選單元件
onEndDrawerChanged	DrawerCallback	右側抽屜選單改變事件回撥
bottomNavigationBar	Widget	底部導航條
bottomSheet	Widget	持久在body下方，底部控制元件上方的控制元件
backgroundColor	Color	腳手架背景顏色
resizeToAvoidBottomInset	bool	防止小元件重複
primary	bool	腳手架是否延伸到頂部
drawerDragStartBehavior	DragStartBehavior	檢測手勢行為方式，與drawer配合使用
extendBody	bool	是否延伸到底部
extendBodyBehindAppBar	bool	是否延伸到頂部，用於做半透明、毛玻璃效果的主要控制屬性
drawerScrimColor	Color	側邊欄彈出時非遮蓋層主頁面的顏色
drawerEdgeDragWidth	double	側邊欄彈出時非遮罩層的寬度
drawerEnableOpenDragGesture	bool	左側抽屜是否支援手勢滑動
endDrawerEnableOpenDragGesture	bool	右側抽屜是否支援手勢滑動
restorationId	String	狀態還原識別符號

Scaffold屬性詳細使用

1、appBar

顯示腳手架的頂部導航欄

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
);
複製程式碼

2、body

顯示腳手架的主要內容

使用方法

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
);
複製程式碼

3、floatingActionButton

懸浮按鈕，預設位於右小角

使用方法

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
);
複製程式碼

4、floatingActionButtonLocation

決定懸浮按鈕的位置

使用方法

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
);
複製程式碼

5、floatingActionButtonAnimator

決定懸浮按鈕的動畫

使用方法

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
);
複製程式碼

6、persistentFooterButtons

顯示在腳手架底部的一組按鈕

使用方法

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
	persistentFooterButtons: [
    TextButton(onPressed: (){}, child: Text("Text1")),
    TextButton(onPressed: (){}, child: Text("Text2")),
  ],
);
複製程式碼

7、drawer

左側抽屜選單元件，如果需要自定義可通過設定 Scaffold 的 key 來操作手動開啟側邊欄，程式碼如下

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  )
);
複製程式碼

8、onDrawerChanged

左側抽屜選單改變事件回撥

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  onDrawerChanged: (isOpen) {
  	print(isOpen);
  },
);
複製程式碼

9、endDrawer

右側抽屜選單元件,功能和 drawer 一樣，唯一的區別是一個在左側，一個在右側。

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	endDrawer: Drawer(
  	child: Center(child: Text("draw"),),
  ),
);
複製程式碼

10、onEndDrawerChanged

右側抽屜選單改變事件回撥，使用方式和 onDrawerChanged 一樣。

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	endDrawer: Drawer(
  	child: Center(child: Text("draw"),),
  ),
  onEndDrawerChanged: (isOpen) {
    print(isOpen);
  },
);
複製程式碼

11、bottomNavigationBar

底部導航條，常用於切換底部 item

使用方法

  int _currentIndex = 0;
  List<Widget> _pages = [
    Center(child: Text("tab1"),),
    Center(child: Text("tab2"),),
  ];

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        label: "tab1",
        icon: Icon(Icons.settings)
      ),
      BottomNavigationBarItem(
        label: "tab2",
        icon: Icon(Icons.settings)
      )
    ],
    currentIndex: _currentIndex,
    onTap: (currentIndex) {
      setState(() {
        _currentIndex = currentIndex;
      });
    },
  ),
);
複製程式碼

12、bottomSheet

持久在body下方，底部控制元件上方的控制元件

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	bottomSheet: Container(child: Row(
    children: [
      Expanded(child: TextField()),
      ElevatedButton(onPressed: (){}, child: Text("傳送"))
    ],
  ),)
);
複製程式碼

13、backgroundColor

腳手架背景顏色

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	backgroundColor: Colors.pink,
);
複製程式碼

14、resizeToAvoidBottomInset

防止元件重複，當鍵盤彈起時會擋住元件，該值設定為 ture 可防止鍵盤遮擋

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	resizeToAvoidBottomInset: true,
);
複製程式碼

15、primary

腳手架是否延伸到頂部

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	primary: true,
);
複製程式碼

16、drawerDragStartBehavior

拖動行為方式，與 drawer 配合使用，用於開啟和關閉抽屜的拖動行為將在檢測到拖動手勢時開始。如果設定為 DragStartBehavior.down，它將在首次檢測到 down 事件時開始。當拖動返回時會使用 DragStartBehavior.down 是有很明顯的卡頓，建議使用 DragStartBehavior.start

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerDragStartBehavior: DragStartBehavior.start
);
複製程式碼

17、extendBody

是否延伸到底部，主要用於做半透明效果。

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	extendBody: true,
);
複製程式碼

18、extendBodyBehindAppBar

是否延伸到頂部，用於做半透明、毛玻璃效果的主要控制屬性

使用方法

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	extendBodyBehindAppBar: true,
);
複製程式碼

19、drawerScrimColor

側邊欄彈出時非遮蓋層主頁面的顏色

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
);
複製程式碼

20、drawerEdgeDragWidth

側邊欄彈出時非遮罩層的寬度，當滑動的距離小於該值時，遮罩層會彈出。預設值是20

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEdgeDragWidth: 100,
);
複製程式碼

21、drawerEnableOpenDragGesture

左側抽屜是否支援手勢滑動，如果設定為 false ，將不能通過側滑手勢滑出，預設true

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEnableOpenDragGesture: false,
);
複製程式碼

22、endDrawerEnableOpenDragGesture

右側抽屜是否支援手勢滑動，如果設定為 false ，將不能通過側滑手勢滑出，預設 true

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEnableOpenDragGesture: false,
  endDrawerEnableOpenDragGesture: false,
);
複製程式碼

23、restorationId

狀態還原識別符號

使用方法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
	restorationId: "scaffold"
);
複製程式碼

總結

以上是針對Scaffold的所有使用方法，最常用的屬性有appBar、body，其他屬性都是在特定的情況才會使用。

Flutter深入淺出元件篇---TabBar
2021-08-25
Flutter元件tabBar
Flutter深入淺出元件篇---MaterialApp
2021-08-21
Flutter元件APP
Flutter深入淺出元件篇---AppBar
2021-08-23
Flutter元件APP
Flutter 容器控制元件篇-->Scaffold
2019-09-30
Flutter控制元件
Flutter深入淺出元件篇---Align、AnimatedAlign
2021-08-29
Flutter元件
Flutter深入淺出元件篇---SizeBox、FittedBox
2021-09-02
Flutter元件
Flutter深入淺出元件篇---繼承關係圖
2021-08-17
Flutter元件繼承
Flutter深入淺出元件篇---Padding、AnimatedPadding
2021-08-27
Flutter元件padding
Flutter | 深入淺出Key
2019-04-02
Flutter
flutter - 自定義 Drawer 元件(不依賴 Scaffold)
2023-03-26
Flutter元件
Flutter 系列文章：Flutter Scaffold 控制元件介紹
2019-03-19
Flutter控制元件
Flutter深入淺出元件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox
2021-08-31
Flutter元件AI
flutter ScopedModel深入淺出
2019-09-10
Flutter
深入淺出 Flutter Framework 之 BuildOwner
2020-05-16
FlutterFrameworkUI
深入淺出 Flutter Framework 之 Element
2020-05-17
FlutterFramework
Flutter 之 Scaffold 、AppBar 控制元件詳解
2021-07-19
FlutterAPP控制元件
深入淺出 Flutter Framework 之 Widget
2020-05-10
FlutterFramework
Flutter深入淺出--（二）Flutter 的發展歷程
2020-01-07
Flutter
深入淺出之JVM GC篇
2015-04-30
JVMGC
深入淺出理解 React高階元件
2018-11-15
React元件
Flutter 基礎（五）Material 元件之 MaterialApp、Scaffold、AppBar
2019-06-10
Flutter元件APP
Flutter基礎（五）Material元件之MaterialApp、Scaffold、AppBar
2019-07-09
Flutter元件APP
vuejs深入淺出—基礎篇
2017-01-02
VueJS
深入淺出RxJava(一：基礎篇)
2016-04-27
RxJava
深入淺出RxJava（1）：基礎篇
2015-09-15
RxJava
深入淺出 Flutter Framework 之 PaintingContext
2020-05-30
FlutterFrameworkAIGCContext
深入淺出PyTorch（運算元篇）
2020-06-22
PyTorch
深入淺出FE（十四）深入淺出websocket
2020-11-29
Web
深入淺出 Golang 資源嵌入方案：前篇
2022-01-17
Golang
深入淺出Java執行緒池：使用篇
2021-01-31
Java執行緒
RxJava+Retrofit+OkHttp深入淺出-mvp（使用篇）
2017-06-12
RxJavaHTTPMVP
深入淺出Java執行緒池：原始碼篇
2021-02-06
Java執行緒原始碼
深入淺出——MVC
2020-05-26
MVC
深入淺出mongoose
2019-03-03
Go
HTTP深入淺出
2019-04-05
HTTP
深入淺出IO
2019-05-14
深入淺出 RabbitMQ
2021-09-09
MQ
深入淺出Promise
2021-06-08
Promise

Flutter深入淺出元件篇---Scaffold

Scaffold介紹

Scaffold在什麼情況下使用

示例程式碼

Scaffold屬性和說明

Scaffold屬性詳細使用

1、appBar

使用方法

2、body

使用方法

3、floatingActionButton

使用方法

4、floatingActionButtonLocation

使用方法

5、floatingActionButtonAnimator

使用方法

6、persistentFooterButtons

使用方法

7、drawer

使用方法

8、onDrawerChanged

使用方法

9、endDrawer

使用方法

10、onEndDrawerChanged

使用方法

11、bottomNavigationBar

使用方法

12、bottomSheet

使用方法

13、backgroundColor

使用方法

14、resizeToAvoidBottomInset

使用方法

15、primary

使用方法

16、drawerDragStartBehavior

使用方法

17、extendBody

使用方法

18、extendBodyBehindAppBar

使用方法

19、drawerScrimColor

使用方法

20、drawerEdgeDragWidth

使用方法

21、drawerEnableOpenDragGesture

使用方法

22、endDrawerEnableOpenDragGesture

23、restorationId

使用方法

總結

相關文章