Question

我正在尝试在底部导航栏的中间添加一个浮动操作按钮。问题没有出现。这是问题的图片。

我的代码就是这样

import 'package:flutter/material.dart';

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int _selectedTab = 0;
  final _pageOptions = [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xffFF5555),
      ),
      home: Scaffold(
        body: _pageOptions[_selectedTab],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          foregroundColor: Colors.white,
          elevation: 2.0,
        ),
        bottomNavigationBar: BottomAppBar(
          notchMargin: 2.0,
          shape: CircularNotchedRectangle(),
          child: SizedBox(
            height: 80,
            child: Theme(
              data: Theme.of(context).copyWith(
                  // sets the background color of the `BottomNavigationBar`
                  canvasColor: Color(0xff1B213B),

                  // sets the active color of the `BottomNavigationBar` if `Brightness` is light
                  primaryColor: Color(0xffFF5555),
                  textTheme: Theme.of(context)
                      .textTheme
                      .copyWith(caption: new TextStyle(color: Colors.white))),
              child: BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                currentIndex: _selectedTab,
                onTap: (int index) {
                  setState(() {
                    _selectedTab = index;
                  });
                },
                fixedColor: Color(0xffFF5555),
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.tv), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.card_membership), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.share), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text('')),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

我想在中间的红色fab图标周围添加槽口。我尝试了两种形状：CircularNotchedRectangle（）和AutomaticNotchedShape方法。但是没有任何效果。大多数示例显示在“ BottomAppBar”内使用“ Row”。但是我想使用BottomNavigationBar。请帮助我找到解决方法

Answer 1

在小部件BottomAppBar（）中使用此属性

clipBehavior: Clip.antiAlias,

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

1 个答案: