BottomAppBar中的槽口用于自定义FAB [英] Notch in BottomAppBar for custom FAB

问题描述

我正在使用 unicorndial 包中的UnicornDialer创建物料快速拨号体验在我的应用程序的主页上，但是如果我设置shape属性以定义一个凹口，则该凹口将无法正确绘制:

I'm using UnicornDialer from the unicorndial package to create a Material speed dial experience on the home page of my app, but if I set the shape property to define a notch, then notch is not painted correctly:

我在另一个软件包( flutter_speed_dial 上注意到)明确提到这是行不通的:

I noticed on another package (flutter_speed_dial) that this was explicitly mentioned as not working:

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

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和BottomAppBar的代码，所以我无法弄清楚为什么槽口已损坏这样.

In the case of UnicornDialer the widget returned by the build method is a standard FloatingActionButton and having trawled through the code for Scaffold and BottomAppBar I can't work out why the notch is corrupted like that.

我曾尝试使用标准FAB(但透明)创建槽口，然后将Scaffold和UnicornDialer包裹在Stack中以放置所有内容，效果很好，但是当您显示 UnicornDialer不会移动，因此我回到需要BottomAppBar来正确处理自定义FAB以便进行陷波计算的问题.有什么想法吗?

I had tried using a standard FAB (but transparent) to create the notch, then wrapping the Scaffold and UnicornDialer in a Stack to position everything, which worked fine, but then when you show a SnackBar the UnicornDialer doesn't move, so I'm back to needing BottomAppBar to treat the custom FAB properly for notch calculation. Any ideas?

推荐答案

您需要用一个容器包装UnicornDialer并控制切槽边距， 请注意，notchMargin可以取负值，

You need to wrap UnicornDialer by a container and control the notch margin , please note that notchMargin can take negative value,

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

it seems that the renderer of the notch of the bottomAppBar are not able to calculate the Besier curves correctly from the raw UnicornDialer .

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

you can use the following code as a guide. it is working well

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！