Flutter BottomAppBar


简介

BottomAppBar “底部应用栏”

  • 一个通常与 Scaffold.bottomNavigationBar 一起使用的容器,可以在顶部有一个凹口,为重叠的FloatingActionButton腾出空间;

基本用法

通常与 Scaffold 和 FloatingActionButton 一起使用;

实例演示

import 'package:flutter/material.dart';

/*
* AppBar 默认的实例,无状态
* */
class AppBarLessDefaultSimple extends StatelessWidget {
  final widget;
  final parent;

  const AppBarLessDefaultSimple([this.widget, this.parent])
      : super();

  @override
  Widget build(BuildContext context) {
    return  SizedBox(
      height: 100,
      child: Scaffold(
        //appBar: AppBar(title: const Text('Bottom App Bar')),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add), onPressed: () {},),
          bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            notchMargin: 10.0,// FloatingActionButton和BottomAppBar 之间的差距
            color:Colors.pink,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(icon: Icon(Icons.menu), onPressed: () {},),
                IconButton(icon: Icon(Icons.search), onPressed: () {},),
              ],
            ),
          ),
        )
    );
}}