仿寫Android的Activity

​ 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入門