【Flutter】导航控件

AppBar

image

  appBar: AppBar(
      title: Text('title'), // 标题
      actions: [
        Icon(Icons.share)
      ], // 用来展示右侧的组件
      elevation: 20, // z 轴阴影
      backgroundColor: Colors.red, // 背景色
      centerTitle: false,
      titleSpacing: 10,
      toolbarOpacity: .5,
      bottomOpacity: .5,
      leading: Icon(Icons.star), // 用来显示一个按钮去关闭当前页面或者打开一个 drawer
      flexibleSpace: FlexibleSpaceBar(
        title: Text('flexibleSpace'),
      ),
      bottom: PreferredSize(
          child: Container(
            color: Colors.red,
            child: Text('bottom'),
          ),
          preferredSize: Size(500.0, 100.0)
      ),
      automaticallyImplyLeading: true,
    )

• title 标题

• leading 用来显示一个按钮去关闭当前页面或者打开一个 drawer,

• automaticallyImplyLeading ????不知道有啥用

• actions: <Widget>[] 右侧操作按钮等

• flexibleSpace 创建一个灵活的空格 一般是 FlexibleSpace

• bottom 一个 block

• elevation 阴影

• backgroundColor 背景色

• brightness [ Brightness.dark, Brightness.light] 亮度，这里改变的是 wifi 和电量的颜色

  
  image
  image

• iconTheme

    iconTheme: IconThemeData(
        color: Colors.white,
        opacity: 0.5
    ), // 改变图标样式
  

• textTheme 改变字体样式 TextTheme 可以选择更改多种标题的样式

    textTheme: TextTheme(
        title: TextStyle(
          fontSize: 18
        )
    )
  

• primary 这个应用程序栏是否显示在屏幕顶部
  如果为真，Appbar 的工具栏元素和 [ bottom ] 小部件将被系统状态栏的高度填充在顶部。[ flexibleSpace ] 的布局不受 [ primary ] 属性的影响。
  以 iphone 为例： primary: false 时展示成：

  
  image

• centerTitle 标题是否展示在中间

• titleSpacing 标题的间距, 默认为 NavigationToolbar.kMiddleSpacing
  没有 leading 的时候可能需要设置

• toolbarOpacity 透明度 不影响 [ bottom ] 和 flexibleSpace

• bottomOpacity [ bottom ] 的透明度

BottomNavigation

  bottomNavigationBar: BottomNavigationBar(
      iconSize: 20.0,
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.blue,
      onTap: (index) {
        _currentIndex = index;
        print(index);
      },
      currentIndex: _currentIndex,
      items: <BottomNavigationBarItem> [
        BottomNavigationBarItem(
          icon: Icon(Icons.star),
          title: Text('星星-1'),
          activeIcon: Icon(
            Icons.star,
            color: Colors.red,
          )
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.nature),
          title: Text('星星-2')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.menu),
            title: Text('星星-3')
        ),
      ],
    )

image

• items 必须大于等于 2

• iconSize 设置 icon 大小 默认为 24

• onTap 点击事件

• currentIndex 当前选中的 index

• type:
  BottomNavigationBarType.fixed 具有固定的宽度，始终显示其文本标签，并且在单击时不移位。
  BottomNavigationBarType.shifting 标签的位置和大小会在点击时淡入。只有选中的项目显示其文本标签。

• fixedColor type = BottomNavigationBarType.fixed 的时候 设置文字的颜色

Drawer

主要是通过 child 设置列表

    drawer: Drawer(
      child: Text('Drawer')
    ),

通过代码控制抽屉打开

  leading: Builder(
        builder: (context) => IconButton(
          icon: new Icon(Icons.settings),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
      ),

Scaffold

• backgroundColor 设置背景色

• appBar 详情见上 AppBar

• drawer 从左往右的抽屉导航 见上 Drawer

• endDrawer 从右往左的抽屉导航
  打开 抽屉的方法为

    Scaffold.of(context).openDrawer(),
  

• bottomNavigationBar 见上 BottomNavigationBar

• body 页面主

• floatingActionButton 悬浮按钮

• floatingActionButtonLocation 悬浮按钮位置

• floatingActionButtonAnimator 悬浮按钮位置变换动画

• persistentFooterButtons 曾现在 body 下面 bottomNavigationBar 上面

• bottomSheet 底部的 block