Flutter学习之BottomAppBar

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

本文主要讲述下BottomAppBar的介绍和使用

1. 使用

BottomAppBar通常用于Scaffold.bottomNavigationBar，看下属性也是比较简单的

const BottomAppBar({
  Key? key,
  this.color,/// 颜色
  this.elevation,///阴影值
  this.shape,/// 形状
  this.clipBehavior = Clip.none,/// 剪裁
  this.notchMargin = 4.0, /// 缺口外边距
  this.child,
}

简单使用

Scaffold(
  bottomNavigationBar: BottomAppBar(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.home), onPressed: () {  },
        ),
        IconButton(
          icon: const Icon(Icons.message), onPressed: () {  },
        ),
        IconButton(
          icon: const Icon(Icons.blur_circular), onPressed: () {  },
        ),
        IconButton(
          icon: const Icon(Icons.person), onPressed: () {  },
        ),

      ],
    ),
  ),

);

• 添加异形按钮

我们可以在Scaffold中添加FloatingActionButton是悬浮在BottomAppBar上面，并没有嵌入里面，嵌入里面用法如下：

  floatingActionButton: FloatingActionButton(
    foregroundColor: Colors.white,
    backgroundColor: Colors.blueAccent,
    elevation: 10,
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

);

• 修饰

我们在BottomAppBar中修饰下

bottomNavigationBar: BottomAppBar(
  shape: const CircularNotchedRectangle(),
  )

• 调整间距

bottomNavigationBar: BottomAppBar(
  notchMargin: 8,
  ）

• 添加阴影

bottomNavigationBar: BottomAppBar(
  elevation: 8,
  )

• 改变悬浮按钮样式

bottomNavigationBar: BottomAppBar(
  shape: const AutomaticNotchedShape(
        RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
)
floatingActionButton: FloatingActionButton.extended(onPressed: (){}, label: const Text('发帖'),icon: const Icon(Icons.add),elevation: 10,),

• 自定义切角
  分别设置BottomAppBar和FloatingActionButton的shape，自定义我们想要的圆角

bottomNavigationBar: BottomAppBar(
  shape: AutomaticNotchedShape(
  const RoundedRectangleBorder(),
      BeveledRectangleBorder(borderRadius: BorderRadius.circular(20))),
  notchMargin: 8,
  elevation: 8,
  ）

floatingActionButton: FloatingActionButton.extended(
  onPressed: (){},
  label: const Text('发帖'),
  icon: const Icon(Icons.add),
  shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(20)),
  elevation: 10,),

修改按钮的位置

floatingActionButtonLocation: FloatingActionButtonLocation.miniEndDocked,

2. 实现逻辑

通常我们配合tabBar,首先我们定义下通过枚举定义主页面的信息

enum ScaffoldItem {
  home,
  ui,
  function,
  network;

  @override
  String toString () {
    switch (this) {
      case ScaffoldItem.home:
        return '首页';
      case ScaffoldItem.ui:
        return 'UI展示';
      case ScaffoldItem.function:
        return '功能';
      case ScaffoldItem.network:
        return '网络相关';

    }
  }
  IconData get iconData {

    switch (this) {
      case ScaffoldItem.home:
        return Icons.home;
      case ScaffoldItem.ui:
        return Icons.format_underline;
      case ScaffoldItem.function:
        return Icons.functions;
      case ScaffoldItem.network:
        return Icons.network_check_rounded;
    }

  }

}

• BottomAppBar

bottomNavigationBar:BottomAppBar(
  child: SizedBox (
    // height: 49,
    child:  TabBar(
      overlayColor: MaterialStateProperty.all(Colors.transparent),
      indicator: const BoxDecoration(),
      indicatorWeight: 0,
      labelColor: kBlackColor,
      indicatorPadding: EdgeInsets.zero,
      controller: _tabController,
      // unselectedLabelColor:Colors.black12,
      tabs: ScaffoldItem.values
          .map((e) => Tab(text:e.toString(),icon: Icon(e.iconData) )).toList(),
    ),
  )

• body

List<Widget> getTabWidget(BuildContext context) => [
  Container(color: Colors.red,),
  Container(color: Colors.blue,),
  Container(color: Colors.red,),
  Container(color: Colors.orangeAccent,),
];

body: TabBarView(
  controller: _tabController,
  children: getTabWidget(context),
)

• TabController

初始化TabController

class _BottomAppBarPageState extends State<BottomAppBarPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: ScaffoldItem.values.length, vsync: this);
  }
  }