仿寫Android的Activity

damengzai發表於2019-10-06
Android

​ 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，給了一個藍色的背景。

仿寫Android的Activity

MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.blue,
  ),
);
複製程式碼

appBar:

  • leading：通常用於左側的返回上一頁按鈕
  • title：標題
  • actions：對應android的menu，選中選單
  • flexibleSpace：配合appBar實現CollapsingToolbarLayout效果，向上滑動頭部摺疊效果（後續會有文章實現具體效果）
  • bottom：在appBar底部展示一個TabBar

仿寫Android的Activity

仿寫Android的Activity

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作為選項。

仿寫Android的Activity

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作為子元件，子元件可以包括圖示和文案。

仿寫Android的Activity

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

FLutter入門

相關文章