在颤动中添加底部导航栏后，我体内的小部件停止工作

Question

我尝试在我的项目中添加一个底部导航栏。一旦我完成了底部导航栏 - 我在主体下的所有小部件都没有显示。 Android Studio 没有显示任何错误，但仍然出现空白屏幕，底部只有导航栏。

如果我删除底部导航栏，我在正文下的所有小部件（容器、图像）都会自动开始正常工作。

我不明白导航栏出了什么问题。

我尽我最大的努力寻找这个问题，但找不到任何我寻求帮助的人。我在下面附上了我的代码

代码：

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: bottomBar(context),
      body: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [const Color(0xFFffd194), const Color(0xFF70e1f5)],
              begin: FractionalOffset.topLeft,
              end: FractionalOffset.bottomRight,
              stops: [0.1, 1.0],
              tileMode: TileMode.clamp),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(
              image: AssetImage('assets/bout1.png'),
            ),
          ],
        ),
      ),
    );
  }

  //widget for bottom navigation bar starts here

  Widget bottomBar(BuildContext context) {
    return Align(
      alignment: Alignment(-1, 1),
      child: Container(
        padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
        height: 60,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black12,
            width: 1,
          ),
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded(
                flex: 1,
                child: IconButton(
                  highlightColor: Colors.red,
                  splashColor: Colors.greenAccent,
                  icon: Icon(
                    Icons.home,
                    color: Color(0xffa1a5b5),
                  ),
                  iconSize: 28,
                  onPressed: () {
                    Navigator.of(context).pushNamed('/Login');
                  },
                )),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.swap_horiz,
                  color: Color(0xffa1a5b5),
                  size: 28,
                ),
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                icon: Icon(
                  Icons.show_chart,
                  color: Color(0xffa1a5b5),
                ),
                iconSize: 28,
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.notifications_none,
                  color: Color(0xffa1a5b5),
                ),
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.person_outline,
                  color: Color(0xffa1a5b5),
                ),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

每当您看到内容因添加其他内容而被隐藏时，通常是因为“其他内容”与您的内容重叠。您的内容就在那里，只是隐藏在 Align 小部件后面。

我通过将Align 小部件包装在带有颜色Colors.yellow 的Container 小部件中来解决这个问题：

  Widget bottomBar(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Align(...),
    );
  }

当我删除 Align 小部件时，一切似乎都正常工作：

我猜您之前添加了Align 小部件以确保bottomBar 粘在底部，但使用Scaffold 的bottomNavigationBar 参数添加底部导航栏小部件已经为您做到了。