Question

我正在尝试在底部导航栏的中间添加一个浮动操作按钮。问题是没有出现边框，而且浮动操作按钮和图标的边距也不符合我的要求。

这里是问题的图片。 Achieved Image

这是我想要的照片 Required Image

代码

var canvas;
var cap;
var xpos = 0;

function setup()
{
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.style("display", "block");
    background("#666666");

    //create an instance of the webcam
    cap = createCapture(VIDEO);

    cap.size(640, 480);
    cap.hide();
}


function draw()
{
    //load pixel data of webcam capture
    cap.loadPixels();

    //if the first pixel's R value is set continue with the rest of the script
    if (cap.pixels[1] > 0)
    {
        var w = cap.width;
        var h = cap.height;

        copy(cap, w/2, 0, 10, h, xpos, (height / 2) - (h / 2), 10, h);

        xpos = xpos + 1;

        if (xpos > width) xpos = 0;
    }
}

}

Answer 1

有许多可能的解决方案，其中之一是添加填充和边框。

import 'package:charts_flutter/flutter.dart' as prefix0;
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueAccent,
        floatingActionButton: Padding(
          padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 70,
            width: 70,
            child: FloatingActionButton(
              backgroundColor: Colors.transparent,
              elevation: 0,
              onPressed: () {},
              child: Container(
                height: 70,
                width: 70,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 4),
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    begin: const Alignment(0.7, -0.5),
                    end: const Alignment(0.6, 0.5),
                    colors: [
                      Color(0xFF53a78c),
                      Color(0xFF70d88b),
                    ],
                  ),
                ),
                child: Icon(Icons.photo_camera, size: 30),
              ),
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          child: Container(
            height: 80,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

Answer 2

另一种选择是在您的 notchMargin 中使用 BottomAppBar 以获得相反的答案。看起来很棒，所以我决定也添加该选项。

https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a

return Scaffold(
  appBar: AppBar(
    title: Text('Flutter notch demo'),
  ),
  bottomNavigationBar: BottomAppBar(
    notchMargin: 2.0,
    shape: CircularNotchedRectangle(),
  ),
  floatingActionButtonLocation:
  FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(
  onPressed: () => Navigator.of(context).pop(),
  child: Icon(Icons.done_all),
  ),
);

Answer 3

这是一个非常清晰的官方示威游行：https://youtu.be/2uaoEDOgk_I

代码将如下所示：

Scaffold(..
  floatingActionButton..
  bottomNavigationBar..
    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked

如何在带有边框的底部导航栏中的底部添加浮动动作按钮？

3 个答案: