Flutter BottomNavigationBar 和高级导航

Question

我正在构建一个在底部导航栏中包含 3 个项目的应用。当我更改选项卡时，会呈现一个不同的小部件。到目前为止，还不错...

import 'package:flutter/material.dart';

class BottomTest extends StatefulWidget {
  State createState() => new _BottomTestState();
}

class _BottomTestState extends State<BottomTest> {
  List<Widget> _pages;
  Widget _selectedContent;
  int _bottomIndex;

  @override
  void initState() {
    _bottomIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _definePages();

    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Test'),
      ),
      body: _selectedContent ?? _pages[_bottomIndex],
      bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.add),
                  title: Text("Red")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.location_on),
                  title: Text("Blue")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.people),
                  title: Text("Green")
              )
            ],
            currentIndex: _bottomIndex,
            onTap: _onTabTapped,
        )
    );
  }

  _definePages() {
    _pages = [
      Container(
          color: Colors.red,
          child: Stack(children: <Widget>[
            _defineFloatingActionButton(),
          ])
      ),
      Container(color: Colors.blue),
      Container(color: Colors.green),
    ];
  }

  _defineFloatingActionButton() {
    return Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            //TODO: How to navigate to another page with still displaying the bottom navigation bar?
          }
      ),
    );
  }

  void _onTabTapped(int index) {
    setState(() {
      _bottomIndex = index;
      _selectedContent = _pages[index];
    });
  }
}

//POST
class Post extends StatefulWidget {
  State createState() => new _PostState();
}

class _PostState extends State<Post> {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      PostHeader(),
      Text('This is a post.') 
    ]);
  }
}

//POSTHEADER
class PostHeader extends StatefulWidget {
  State createState() => new _PostHeaderState();
}

class _PostHeaderState extends State<PostHeader> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Text('Author'),
      onTap: () {
        //TODO: This should navigate to another page but still displaying the bottom navigation bar, too.
      },
    );
  }
}

但我想不出更高级导航的最佳实践。我目前面临两个问题。

1. 当在第一页点击 FloatingActionButton 时，我想显示第四页，但 BottomNavigationBar 仍然需要可见和可操作。

2. 构建一个更复杂的应用程序时，我要处理一些嵌套类。所以在我的根页面上，有一个类“Post”，帖子包含一个类“PostHeader”。在 PostHeader 中，有一个带有 onTap 回调的 ListTile 应该会影响我的 _selectedContent。我如何定义这个回调？通过所有不同的类传递它似乎不正确。

我考虑过在我的 BottomTest.dart 中定义它并通过 Post 和 PostTile 传递它，但这对我来说似乎不是最佳实践，尤其是在谈论大量必需的回调时。

非常非常感谢您!

Answer 1

我假设第四页将显示为其他三页中的任何一页，并且由于按钮位于第一页中，因此第四页将取代第一页并且仍然表示第一个底部为“红色” "字段处于事件状态。

如果是这种情况，您应该为第一页创建一个独立的小部件，其中包含显示其他内容所需的所有逻辑。因此，您可以避免重建主要布局，包括 BottomNavigationBar。

您可以使用 FirstPage 小部件，沿着这些思路使用:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new BottomTest(),
    );
  }
}

class BottomTest extends StatefulWidget {
  State createState() => new _BottomTestState();
}

class _BottomTestState extends State<BottomTest> {
  List<Widget> _pages;
  Widget _selectedContent;
  int _bottomIndex;

  @override
  void initState() {
    _bottomIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _definePages();

    return Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Test'),
        ),
        body: _selectedContent ?? _pages[_bottomIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("Red")),
            BottomNavigationBarItem(
                icon: Icon(Icons.location_on), title: Text("Blue")),
            BottomNavigationBarItem(
                icon: Icon(Icons.people), title: Text("Green"))
          ],
          currentIndex: _bottomIndex,
          onTap: _onTabTapped,
        ));
  }

  _definePages() {
    _pages = [
      FirstPage(),
      Container(color: Colors.blue),
      Container(color: Colors.green),
    ];
  }

  void _onTabTapped(int index) {
    setState(() {
      _bottomIndex = index;
      _selectedContent = _pages[index];
    });
  }
}

//POST
class Post extends StatefulWidget {
  State createState() => new _PostState();
}

class _PostState extends State<Post> {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[PostHeader(), Text('This is a post.')]);
  }
}

//POSTHEADER
class PostHeader extends StatefulWidget {
  State createState() => new _PostHeaderState();
}

class _PostHeaderState extends State<PostHeader> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Text('Author'),
      onTap: () {
        //TODO: This should navigate to another page but still displaying the bottom navigation bar, too.
      },
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {

  bool showFirst = true;

  _defineFloatingActionButton() {
    return Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _onButtonPressed,
      ),
    );
  }

  _onButtonPressed() {
    setState(() {
      showFirst = !showFirst;
    });
  }

  _buildFirst() {
    return Container(
        color: Colors.red,
        child: Stack(children: <Widget>[
          _defineFloatingActionButton(),
        ]));
  }

  _buildFourth() {
    return Container(
        color: Colors.grey,
        child: Stack(children: <Widget>[
          _defineFloatingActionButton(),
        ]));
  }

  @override
  Widget build(BuildContext context) {
    return showFirst ? _buildFirst() : _buildFourth();
  }
}

对于第二点，也许你应该打开另一个问题，这样你就可以在不同的答案中保留两个或多或少不相关的问题。