Question

我想在FloatingActionButton上方显示BottomNavigationBar。我为FloatingActionButton和BottomNavigationBar创建了两个单独的小部件。但是，当我替换屏幕上的FloatingActionButton时，它将位于BottomNavigationBar

之后

请参见下图

请找到以下代码段。我想在FloatingActionButton上方显示bottomNavigationBar。

main_screen.dart

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: Header().build(context),
        backgroundColor: Colors.white,
        body: Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavBar(this._onItemTapped, _selectedIndex)],
        );
  }

bottomNavBar.dart

class BottomNavBar extends StatefulWidget {
  final Function onItemTapped;
  final int selectedIndex;

  BottomNavBar(this.onItemTapped,this.selectedIndex);

  @override
  State<StatefulWidget> createState() {
    return _BottomNavBar();
  }
}

class _BottomNavBar extends State<BottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        currentIndex: widget.selectedIndex,
        items: navigationItems,
        onTap: (index) {
          widget.onItemTapped(index);
        },
        fixedColor: Theme.of(context).primaryIconTheme.color,
        iconSize: 24.0,
        type: BottomNavigationBarType.fixed);
  }

}

floatingActionButton.dart

FloatingActionButton位于Stack布局内，其调用位于BottomNavigationBarItem内部（这是另一个屏幕）

Widget build(BuildContext context) {
    return SizedBox(
      width: expandedSize,
      height: expandedSize,
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (BuildContext context, Widget child) {
          return Stack(
            alignment: Alignment.center,
            children: <Widget>[
              _buildExpandedBackground(),
              _buildFabCore()
            ],
          );
        },
      ),
    );
  }

 Widget _buildFabCore() {
        double scaleFactor = 2 * (_animationController.value - 0.5).abs();
        return FloatingActionButton(
          onPressed: _onFabTap,
          child: Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()..scale(1.0, scaleFactor),
            child: Icon(
                _animationController.value > 0.5 ? Icons.close : Icons.filter_list,
                color: Colors.white,
                size: 26),
          ),
          backgroundColor: _colorAnimation.value,
        );
      }

Answer 1

在Scaffold内向floatingActionButtonLocation或FloatingActionButtonLocation.endFloat,添加属性FloatingActionButtonLocation.endDocked。

endFloat将在底部导航上方添加FAB。尝试同时应用。

编辑（示例）：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter GTranslate Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  "https://images.pexels.com/photos/1054289/pexels-photo-1054289.jpeg",
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Center(
            child: CircularProgressIndicator(backgroundColor: Colors.red,),
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              InkWell(
                onTap: () {},
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.person),
                    Text("Profile"),
                  ],
                ),
              ),
              InkWell(
                onTap: () {},
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Text("Favorite"),
                  ],
                ),
              ),
              InkWell(
                onTap: () {},
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.settings),
                    Text("Settings"),
                  ],
                ),
              ),
              SizedBox(width: 6.0),
            ],
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(onPressed: () {}, child: Icon(Icons.menu),),
    );
  }
}

如何在bottomNavigationBar顶部显示FloatingActionButton

1 个答案: