Question

我正在使用unicorndial包中的UnicornDialer在应用程序的主页上创建“素材快速拨号”体验，但是如果我设置shape属性来定义一个缺口，，则缺口未正确绘制：

我在另一个软件包（flutter_speed_dial）上注意到这被明确提到是行不通的：

已将SpeedDial小部件构建为放置在floatActionButton中脚手架小部件的参数。不能设置它 Scaffold.floatingActionButtonLocation参数的位置虽然。可以与Scaffold.bottomNavigationBar一起使用，但是浮动按钮将放置在栏上方，而没有可能会留出一个缺口。

对于UnicornDialer，由build方法返回的窗口小部件是标准的FloatingActionButton，并且已通过Scaffold和BottomAppBar的代码进行了拖曳无法弄清楚缺口为什么会这样损坏。

我曾尝试使用标准的FAB（但透明）创建槽口，然后将Scaffold和UnicornDialer包裹在Stack中以放置所有东西，但一切正常，但是当您显示SnackBar时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(() {});
            },
          ),
        ),
      ),
    );
  }
}

BottomAppBar中的槽口用于自定义FAB

1 个答案: