页面内容覆盖导航底部栏-颤动

Question

overview.dart 中的此页面内容当前阻塞了导航底部栏。内容是滚动页面。我希望能够滚动overview.dart 页面内容而不覆盖导航底栏。所以滚动时可以看到页面内容和固定底栏。

我的导航选项卡是在不同的页面中创建的。

Navigation_tab.dart：

import 'package:flutter/material.dart';
class NavigationTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.cyan[700],
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            notchMargin: 4.0,
            child: new Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: Colors.cyan[700],
                    ),
                    onPressed: () {},
                  ),
                  new Container(
                      padding: EdgeInsets.only(left: 20),
                      child: IconButton(
                        icon: Icon(
                          Icons.menu,
                          color: Colors.cyan[700],
                        ),
                        onPressed: () {},
                      )),
                  new Container(
                      padding: EdgeInsets.only(left: 120),
                      child: IconButton(
                        icon: Icon(
                          Icons.explore,
                          color: Colors.cyan[700],
                        ),
                        onPressed: () {},
                      )),
                  new Container(
                      height: 22.0,
                      child: new RawMaterialButton(
                        onPressed: () {},
                        child: new Icon(
                          Icons.person,
                          color: Colors.white,
                          size: 20.0,
                        ),
                        shape: new CircleBorder(),
                        elevation: 1.0,
                        fillColor: Colors.cyan[700],
                      ))
                ])));
  }
}

运行应用的页面：

Overview.dart：

import 'package:flutter/material.dart';
import '../ui/navigation_tab.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class Overview extends StatelessWidget {
  static const routeName = "/navigation";

  Widget _buildLevelCard() {
    return new SizedBox(
        width: 380,
        height: 140,
        child: new Card(
            child: new Column(children: <Widget>[
          new ListTile(
              title: new Text("title"),
              subtitle: new Text("sub")),
          new Container(
              padding: EdgeInsets.all(5),
              child: new Row(children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(right: 7),
                  child: new RaisedButton.icon(
                      color: Colors.lightBlueAccent[400],
                      icon: Icon(
                        Icons.navigate_next,
                        color: Colors.white,
                      ),
                      label: new Text(
                        "Button",
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () => {},
                      shape: new RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(30.0))),
                ),
                new RaisedButton.icon(
                    color: Colors.deepPurple[400],
                    icon: Icon(
                      Icons.navigate_next,
                      color: Colors.white,
                    ),
                    label: new Text(
                      "Button",
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () => {},
                    shape: new RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(30.0)))
              ]))
        ])));
  }

  Widget _buildCarousel() {
    return new SizedBox(
        width: 380,
        height: 180,
        child: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              "http://via.placeholder.com/150x100",
              fit: BoxFit.fill,
            );
          },
          itemCount: 5,
          viewportFraction: 0.8,
          scale: 0.9,
          control: new SwiperControl(),
        ));
  }

  Widget _buildSearchCard() {
    return new SizedBox(
        width: 380,
        height: 140,
        child: new Card(
            child: new Column(children: <Widget>[
          new ListTile(
              title: new Text(
            "Test",
          )),
          new Container(
              padding: EdgeInsets.all(5),
              child: new Row(children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(right: 7),
                )
              ]))
        ])));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan[700],
      appBar: AppBar(
        title: Text('Dashboard'),
      ),
      body: new Stack(
        alignment: Alignment.center,
        children: <Widget>[
          NavigationTabs(),
          SingleChildScrollView(
            child: Container(
              child: new Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(5),
                    child: new ListTile(
                      title: new Text("Title"),
                      subtitle: new Text("Sub"),
                    ),
                  ),
                  _buildLevelCard(),
                  Padding(
                    padding: EdgeInsets.all(5),
                    child: _buildCarousel(),
                  ),
                  _buildSearchCard(),
                  _buildSearchCard(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

See that the scrollable page content is covering the navigation bottom bar.

Answer 1

这是由于同一屏幕上有多个 Scaffold 小部件造成的，因此您需要将 NavigationTabs 脚手架的内容移动到 Overview 脚手架，如下所示：

在 Overview.dart 中替换你的构建方法：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.cyan[700],
    appBar: AppBar(
      title: Text('Dashboard'),
    ),
    body: SingleChildScrollView(
      child: Container(
        child: new Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(5),
              child: new ListTile(
                title: new Text("Title"),
                subtitle: new Text("Sub"),
              ),
            ),
            _buildLevelCard(),
            Padding(
              padding: EdgeInsets.all(5),
              child: _buildCarousel(),
            ),
            _buildSearchCard(),
            _buildSearchCard(),
          ],
        ),
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.cyan[700],
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
    bottomNavigationBar: NavigationTabs(),
  );
}

在 Navigation_tab.dart 中替换你的构建方法：

@override
Widget build(BuildContext context) {
  return BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 4.0,
    child: new Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(
            Icons.home,
            color: Colors.cyan[700],
          ),
          onPressed: () {},
        ),
        new Container(
            padding: EdgeInsets.only(left: 20),
            child: IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.cyan[700],
              ),
              onPressed: () {},
            )),
        new Container(
            padding: EdgeInsets.only(left: 120),
            child: IconButton(
              icon: Icon(
                Icons.explore,
                color: Colors.cyan[700],
              ),
              onPressed: () {},
            )),
        new Container(
            height: 22.0,
            child: new RawMaterialButton(
              onPressed: () {},
              child: new Icon(
                Icons.person,
                color: Colors.white,
                size: 20.0,
              ),
              shape: new CircleBorder(),
              elevation: 1.0,
              fillColor: Colors.cyan[700],
            ))
      ],
    ),
  );
}