2

我正在使用UnicornDialerunicorndial包在我的应用程序的主页上创建 Material 快速拨号体验，但是如果我将shape属性设置为定义一个缺口，则不能正确绘制缺口：

在此处输入图像描述

我注意到另一个包（flutter_speed_dial）明确提到这不起作用：

SpeedDial 小部件被构建为放置在 Scaffold 小部件的 floatingActionButton 参数中。但是，无法使用 Scaffold.floatingActionButtonLocation 参数设置其位置。可以与 Scaffold.bottomNavigationBar 一起使用，但浮动按钮将放置在栏上方，而不能放置带有凹口。

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

我曾尝试使用标准 FAB（但透明）来创建缺口，然后将Scaffoldand包裹UnicornDialer在 aStack中以定位所有内容，效果很好，但是当您显示 aSnackBar不UnicornDialer动时，我又回到了BottomAppBar需要正确处理自定义 FAB 以进行缺口计算。有任何想法吗？

4

1 回答 1

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(() {});
            },
          ),
        ),
      ),
    );
  }
}
于 2018-12-11T10:57:17.280 回答