BottomAppBar 中用于自定义 FAB 的缺口

Question

我正在使用 unicorndial 包中的 UnicornDialer 在我的应用主页上创建 Material 快速拨号体验，但如果我将 shape 属性设置为定义缺口，则不会绘制缺口正确：

我注意到在另一个包 (flutter_speed_dial) 上明确提到这不起作用：

SpeedDial 小部件是为放置在 floatingActionButton 中而构建的 Scaffold 小部件的参数。无法设置它 使用 Scaffold.floatingActionButtonLocation 参数定位 尽管。可以与 Scaffold.bottomNavigationBar 一起使用，但 浮动按钮将放置在栏上方，没有 可以放置一个缺口。

在 UnicornDialer 的情况下，build 方法返回的小部件是标准的 FloatingActionButton 并且已经浏览了 Scaffold 和 BottomAppBar 的代码我无法弄清楚为什么缺口被破坏像这样。

我曾尝试使用标准 FAB（但透明）来创建缺口，然后将 Scaffold 和 UnicornDialer 包装在 Stack 中以定位所有内容，这工作正常，但是当您显示 @987654335 @ UnicornDialer 不动，所以我又回到需要 BottomAppBar 来正确处理自定义 FAB 以进行缺口计算。有什么想法吗？

Answer 1

你需要用容器包裹 UnicornDialer 并控制缺口边距， 请注意，notchMargin 可以取负值，

bottomAppBar 的凹口的渲染器似乎无法从原始 UnicornDialer 正确计算 Besier 曲线。

您可以使用以下代码作为指导。它运行良好

import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';

void main() =>
    runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: Example()));

class Example extends StatefulWidget {
  _Example createState() => _Example();
}

class _Example extends State<Example> {
  @override
  Widget build(BuildContext context) {
    var childButtons = List<UnicornButton>();

    childButtons.add(UnicornButton(
        hasLabel: true,
        labelText: "Choo choo",
        currentButton: FloatingActionButton(

          heroTag: "train",
          backgroundColor: Colors.redAccent,
          mini: true,
          child: Icon(Icons.train),
          onPressed: () {},
        )));

    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "airplane",
            backgroundColor: Colors.greenAccent,
            mini: true,
            child: Icon(Icons.airplanemode_active))));

    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "directions",
            backgroundColor: Colors.blueAccent,
            mini: true,
            child: Icon(Icons.directions_car))));

    return Scaffold(

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: new BottomAppBar(
        shape: CircularNotchedRectangle(),


        notchMargin: -10.0,

        color: Colors.blue,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
      ),
      //floatingActionButton: FloatingActionButton(onPressed: (){}),
      floatingActionButton: Container(
        width: 100.0,
        height: 100.0,
        child: UnicornDialer(
            hasNotch: true,
            //hasBackground: false,
            backgroundColor: Color.fromRGBO(255, 255, 255, 0.0),
            parentButtonBackground: Colors.redAccent,
            orientation: UnicornOrientation.VERTICAL,
            parentButton: Icon(Icons.add),
            childButtons: childButtons),
      ),
      appBar: AppBar(),
      body: Container(

        child: Center(
          child: RaisedButton(
            onPressed: () {
              setState(() {});
            },
          ),
        ),
      ),
    );
  }
}