Flutter，多个浮动操作按钮（缺口）

Question

我可以添加第二个浮动操作按钮吗？我做了一张图片来展示我想要的东西。

PS：我尝试了一些方法（包装堆栈或行小部件等，但结果是；

我也需要底部栏按钮，我发现浮动按钮总是覆盖它的方法。

我当前的代码是：

import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),

      bottomNavigationBar: Container(
        height: 50,
        child: BottomAppBar(
          color: Colors.black,
          shape: CircularNotchedRectangle(),
          clipBehavior: Clip.antiAlias,
          child: RaisedButton(onPressed: () {},
            child: new Text('Details',
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: new FloatingActionButton(
        child: Icon(Icons.home,
          ),
        onPressed: () {},
      ),
      )
    );
  }
}

Answer 1

这是一种方法。我录入了 CircularNotchedRectangle() class，将其复制并粘贴到新的 class 中。我称之为DoubleCircularNotchedButton()。我已经修改了它的 2 个切口和硬编码位置，因此这些切口将始终留在一个地方。这是代码（只需复制粘贴）

import 'dart:math' as math;
import 'package:flutter/material.dart';

class DoubleCircularNotchedButton extends NotchedShape {
  const DoubleCircularNotchedButton();
  @override
  Path getOuterPath(Rect host, Rect guest) {
    if (guest == null || !host.overlaps(guest)) return Path()..addRect(host);

    final double notchRadius = guest.height / 2.0;

    const double s1 = 15.0;
    const double s2 = 1.0;

    final double r = notchRadius;
    final double a = -1.0 * r - s2;
    final double b = host.top - 0;

    final double n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
    final double p2xA = ((a * r * r) - n2) / (a * a + b * b);
    final double p2xB = ((a * r * r) + n2) / (a * a + b * b);
    final double p2yA = math.sqrt(r * r - p2xA * p2xA);
    final double p2yB = math.sqrt(r * r - p2xB * p2xB);

    ///Cut-out 1
    final List<Offset> px = List<Offset>(6);

    px[0] = Offset(a - s1, b);
    px[1] = Offset(a, b);
    final double cmpx = b < 0 ? -1.0 : 1.0;
    px[2] = cmpx * p2yA > cmpx * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);

    px[3] = Offset(-1.0 * px[2].dx, px[2].dy);
    px[4] = Offset(-1.0 * px[1].dx, px[1].dy);
    px[5] = Offset(-1.0 * px[0].dx, px[0].dy);

    for (int i = 0; i < px.length; i += 1)
      px[i] += Offset(0 + (notchRadius + 12), 0); //Cut-out 1 positions

    ///Cut-out 2
    final List<Offset> py = List<Offset>(6);

    py[0] = Offset(a - s1, b);
    py[1] = Offset(a, b);
    final double cmpy = b < 0 ? -1.0 : 1.0;
    py[2] = cmpy * p2yA > cmpy * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);

    py[3] = Offset(-1.0 * py[2].dx, py[2].dy);
    py[4] = Offset(-1.0 * py[1].dx, py[1].dy);
    py[5] = Offset(-1.0 * py[0].dx, py[0].dy);

    for (int i = 0; i < py.length; i += 1)
      py[i] += Offset(host.width - (notchRadius + 12), 0); //Cut-out 2 positions

    return Path()
      ..moveTo(host.left, host.top)
      ..lineTo(px[0].dx, px[0].dy)
      ..quadraticBezierTo(px[1].dx, px[1].dy, px[2].dx, px[2].dy)
      ..arcToPoint(
        px[3],
        radius: Radius.circular(notchRadius),
        clockwise: false,
      )
      ..quadraticBezierTo(px[4].dx, px[4].dy, px[5].dx, px[5].dy)
      ..lineTo(py[0].dx, py[0].dy)
      ..quadraticBezierTo(py[1].dx, py[1].dy, py[2].dx, py[2].dy)
      ..arcToPoint(
        py[3],
        radius: Radius.circular(notchRadius),
        clockwise: false,
      )
      ..quadraticBezierTo(py[4].dx, py[4].dy, py[5].dx, py[5].dy)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close();
  }
}

之后，您可以像调用 CircularNotchedRectangle() 一样在底部应用栏中简单地调用它。连续添加 2 个 FloatingActionButtons 就完成了

Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      body: Container(),
      bottomNavigationBar: Container(
        height: 50,
        child: BottomAppBar(
          color: Colors.black,
          shape: DoubleCircularNotchedButton(), //changed to new class
          clipBehavior: Clip.antiAlias,
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              'Details',
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
// Added row with 2 buttons
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 32),
            child: FloatingActionButton(
              child: Icon(
                Icons.android,
              ),
              onPressed: () {},
            ),
          ),
          FloatingActionButton(
            child: Icon(
              Icons.home,
            ),
            onPressed: () {},
          ),
        ],
      ),
    );

输出

Flutter，多个浮动操作按钮（缺口）

Flutter, Multiple Floataing Action Button (notched)

floating-action-button

flutter

flutter-layout