BottomAppBar 中缺少停靠的 FloatingActionButton 的缺口答案

【问题标题】：Notch for Docked FloatingActionButton Missing in BottomAppBarBottomAppBar 中缺少停靠的 FloatingActionButton 的缺口
【发布时间】：2018-07-09 18:15:31
【问题描述】：

一次

您可以停靠 FloatingActionButton，方法是在Scaffold 中指定floatingActionButtonLocation 并使用BottomAppBar。

documentation 谈论一个：

“缺口”

现在

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Scaffold(
    bottomNavigationBar: BottomAppBar(
      child: Container(
        height: 300.0,
        color: Colors.pinkAccent,
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
));

使用 Flutter 版本 0.5.6，我无法重新创建缺口。第二张图片和它下面的代码属于一起。

这是问题/错误还是我现在可以做些什么？

【问题讨论】：

标签： dart flutter

【解决方案1】：

BottomAppBar 现在需要将其shape 指定为CircularNotchedRectangle，它不像以前的hasNotch 那样设置为默认值：

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(...),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    ...
  ),
);

【讨论】：

【解决方案2】：

您需要指定 shape: CircularNotchedRectangle() 和 clipBehavior: Clip.antiAlias（或 Clip.antiAliasWithSaveLayer）

完整代码：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        clipBehavior: Clip.antiAliasWithSaveLayer,
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 60.0,
          color: Colors.pinkAccent,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(onPressed: () {}),
    );
  }
}

【讨论】：

【解决方案3】：

槽口是可选的/可配置的。在beta 分支中，您可以通过在构造函数中设置hasNotch 属性来获取它们。

但是，dev 分支（以及您指定的 0.5.6 版本）中的情况似乎有所改变。在这里，您为缺口指定 shape。 Flutter Gallery 有一个很好的演示如何制作其中之一。他们还提供看起来像 default implementation for circles 的东西。

你可能只是这样做：

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Scaffold(
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      child: Container(
        height: 300.0,
        color: Colors.pinkAccent,
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
));

【讨论】：

分支可能对未来没有帮助。无论如何，您的代码中出现了一些问题。我在Raouf's answer 的帮助下弄明白了。
很好的反馈！代码已更新。暂时把树枝留在里面，因为如果我把它们拿出来，你的答案基本上是等价的。

【解决方案4】：

哈哈，我也试过了，不明白为什么这么难。

解决方案：它确实需要形状，但也将颜色移出 Container，并移入 BottomAppBar。

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Scaffold(
    bottomNavigationBar: BottomAppBar(
      child: Container(
        height: 300.0,
      ),
      color: Colors.pinkAccent,
    ),
    shape: const CircularNotchedRectangle(),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
));

正确地为 BottomAppBar 着色，带有缺口和一切。如果容器是彩色的，它会覆盖在底部应用栏上，并且会覆盖整个区域。

【讨论】：

【解决方案5】：

是的，有一个拉取请求：

Move the notch computation from the FAB to the BAB. #18372

【讨论】：

【解决方案6】：

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Scaffold(
    bottomNavigationBar: BottomAppBar(
      clipBehaviour: Clip.antiAlias,
      shape: new CircularNotchedRectangle(),
      notchMargin: 5.0,
      child: Container(
        height: 300.0,
        color: Colors.pinkAccent,
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
));

【讨论】：