仿写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入门