BottomAppBar 中用于自定义 FAB 的缺口

Question

我正在使用 unicorndial 包中的 UnicornDialer 在我的应用程序主页上创建 Material 快速拨号体验，但是如果我设置 shape 属性定义一个刘海，然后刘海画错了：

我在另一个包 (flutter_speed_dial) 上注意到这被明确提及为无效：

The SpeedDial widget is built to be placed in the floatingActionButton parameter of the Scaffold widget. It's not possible to set its position with the Scaffold.floatingActionButtonLocation parameter though. The use with the Scaffold.bottomNavigationBar is possible but the floating button will be placed above the bar, without the possibility to be placed with a notch.

在 UnicornDialer 的情况下，build 方法返回的小部件是标准的 FloatingActionButton 并且已经搜索了 Scaffold 和 [=16= 的代码] 我不明白为什么刘海会变成这样。

我曾尝试使用标准 FAB（但透明）来创建凹口，然后将 Scaffold 和 UnicornDialer 包裹在 Stack 中以定位所有内容，效果很好，但是当你显示 SnackBar 时，UnicornDialer 不会移动，所以我又需要 BottomAppBar 来正确处理自定义 FAB 以进行缺口计算。有什么想法吗？

Answer 1

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

bottomAppBar 槽口的渲染器似乎无法从原始 UnicornDialer 正确计算贝塞尔曲线。

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

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 的缺口

Notch in BottomAppBar for custom FAB

floating-action-button

flutter

android-bottomappbar