底部导航栏BottomAppBar

BottomAppBar

BottomAppBar还具有方便的功能，用于将FloatingActionButton附加到BottomAppBar，其构造:

const BottomAppBar({
    super.key,
    this.color,//背景颜色
    this.elevation,//模糊度
    this.shape,//定义凹口的形状
    this.clipBehavior = Clip.none,
    this.notchMargin = 4.0,
    this.child,
  })

常用：

import 'package:flutter/material.dart';
class BottomAppBarPage extends StatefulWidget {
  const BottomAppBarPage({Key? key}) : super(key: key);
  @override
  State<BottomAppBarPage> createState() => _BottomAppBarPageState();
}
class _BottomAppBarPageState extends State<BottomAppBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BottomAppBar'),),
      body: const Center(
        child: Text('BottomAppBar Page'),
      ),
      bottomNavigationBar:  BottomAppBar(
        color: Colors.blue,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: const Icon(Icons.home), onPressed: () {},),
            IconButton(icon: const Icon(Icons.book), onPressed: () {},),
            IconButton(icon: const Icon(Icons.person), onPressed: () {},),
          ],
        ),
      ),
    );
  }
}

跟 FloatingActionButton使用：

 return Scaffold(
      appBar: AppBar(title: const Text('BottomAppBar'),),
      body: const Center(
        child: Text('BottomAppBar Page'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        elevation: 4.0,
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar:  BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: const Icon(Icons.home), onPressed: () {},),
            IconButton(icon: const Icon(Icons.person), onPressed: () {},),
          ],
        ),
      ),
    );

shape

shape属性用于定义凹口的形状,NotchedShape是一个抽象类，它有两个子类：CircularNotchedRectangle和AutomaticNotchedShape。

• CircularNotchedRectangle类可帮助您创建适合圆形FloatingActionButton的圆形槽口。
• AutomaticNotchedShape类可帮助您创建适合FloatingActionButton不同形状的自定义凹口。

bottomNavigationBar:  BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(icon: const Icon(Icons.home), onPressed: () {},),
        IconButton(icon: const Icon(Icons.person), onPressed: () {},),
      ],
    ),
 ),

 return Scaffold(
      appBar: AppBar(title: const Text('BottomAppBar'),),
      body: const Center(
        child: Text('BottomAppBar Page'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: (){},
        elevation: 4.0,
        icon: const Icon(Icons.add),
        label: const Text('Add a book'),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar:  BottomAppBar(
        shape: const AutomaticNotchedShape(
            RoundedRectangleBorder(),
            StadiumBorder(side: BorderSide())
        ),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: const Icon(Icons.home), onPressed: () {},),
            IconButton(icon: const Icon(Icons.person), onPressed: () {},),
          ],
        ),
      ),
    );