BottomAppBar中缺少Docked FloatingActionButton的缺口

Question

一次

通过在FloatingActionButton中指定floatingActionButtonLocation并使用Scaffold，可以停靠 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，我无法重新创建凹口。第二张图片和它下面的代码属于一起。

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

Answer 1

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

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

Answer 2

您需要指定形状：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: () {}),
    );
  }
}

Answer 3

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

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

您可能可以这样做：

shape

Answer 4

是的， 有一个拉取请求：

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

Answer 5

哈哈，我也尝试过制作，但感到困惑，为什么这样做如此困难。

解决方案：它确实需要形状，但是还可以将颜色移出容器，并移入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的颜色，并带有缺口和所有内容。如果容器是彩色的，则将其弯曲到BottomAppBar上方，并将覆盖槽口。

Answer 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: () {}),
  ),
));