Material元件提供了豐富的元件，太豐富的元件導致不知道使用哪個元件好，本文開始介紹部分Flutter的常用元件，用以實現基本的頁面，以Android頁面為基礎，對照實現。
首先介紹Scaffold元件，Scaffold是一個路由頁骨架，使用它可以很方便的拼裝出一個基礎頁面。
Scaffold
建構函式：
Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
})
複製程式碼包括：appBar（導航欄），body（主體內容），drawer（抽屜），bottomNavigationBar（底部導航）
初始化，只顯示Scaffold，給了一個藍色的背景。
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
),
);
複製程式碼appBar:
- leading：通常用於左側的返回上一頁按鈕
- title：標題
- actions：對應android的menu，選中選單
- flexibleSpace：配合appBar實現CollapsingToolbarLayout效果，向上滑動頭部摺疊效果（後續會有文章實現具體效果）
- bottom：在appBar底部展示一個TabBar
appBar: AppBar(
leading: Icon(Icons.arrow_back),
title: const Text('標題'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.add_shopping_cart,
color: Colors.white,
),
onPressed: null,
),
IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
),
onPressed: null),
],
),
複製程式碼body:
scalffold的主體部分，用於展示介面的主要內容；通常使用Row，Column，ListView作為子元件，用於顯示主體內容。
body: Container(
color: Colors.white,
child: Center(
child: Text('center'),
),
),
複製程式碼drawer：
Scaffold的左側滑入的抽屜效果，通常child是一個ListView，ListView中包含DrawerHeader作為頭部和其他item作為選項。
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text(
'DrawerHeader',
),
decoration: BoxDecoration(
color: Colors.blue,
),
),
Text('item1'),
Text('item2'),
],
),
),
複製程式碼注意，在使用Drawer的時候去掉leading，這樣會點選自動新增的leading，滑出drawer，否則只能手勢滑入。
bottomNavigationBar:
底部導航欄，通常包括3-5個bottomNavigationBarItem作為子元件，子元件可以包括圖示和文案。
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
backgroundColor: Colors.white,
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Mine'),
backgroundColor: Colors.white),
],
),
複製程式碼這樣，一個Activity的appBar，body，bottomNavigationBar，drawer都有了，基本可以滿足一個頁面的使用。
github：github.com/damengzai/f…
更多關注微信公眾號：Flutter入門
