使用底部应用栏标签导航 - 颤动

Posted

技术标签:

【中文标题】使用底部应用栏标签导航 - 颤动【英文标题】:Navigate using bottom app bar tabs - flutter 【发布时间】:2019-06-15 13:58:01 【问题描述】:

我在颤振中使用底部应用栏进行底部导航。当点击底部应用栏中的选项卡之一时,我仍然希望底部应用栏和应用栏保持原样,但只有正文内容会根据所点击的内容而变化。

我尝试使用 push() 方法,但它给了我一个新页面,而不是一个后退按钮。

Navigation_tabs.dart:

import 'package:flutter/material.dart';

class NavigationTabs extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () ,
        ),
        appBar: AppBar(
          title: Text('Dashboard'),
        ),
        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.list,
                      color: Colors.cyan[700],
                    ),
                    onPressed: () => Navigator.pushNamed(context, '/login'),
                  )),
              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],
                  ))
            ],
          ),
        ));
  

我希望能够只在没有返回按钮的情况下更改页面内容,而不是在按下其中一个选项卡时转到一个全新的页面。

【问题讨论】:

看看这个帖子:medium.com/coding-with-flutter/… 可以参考本站Bottom navigation 【参考方案1】:

您可以使用 BottomNavigationBarItem 而不是创建按钮,并使用 bottomNavigationBar 的 ontap

class _MyHomePageState extends State<MyHomePage> 
  int _index = 0;
  final List<Widget> _children = [
    Center(child: Text("First Page"),),
    Center(child: Text("Second Page"),),
    Center(child: Text("Third Page"),)
  ];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Navigation"),
      ),
      body: Center(
        child: (_children[_index ]),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_one),
            title: Text('First'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two),
            title: Text('Second'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            title: Text('Third'),
          )
        ],
      ),
    );
  

  void onTabTapped(int index) 
   setState(() 
     _index = index;
   );
 

更详细的解释:

Flutter documentation

【讨论】:

以上是关于使用底部应用栏标签导航 - 颤动的主要内容,如果未能解决你的问题,请参考以下文章

颤动底部导航,其中一个页面有选项卡

使用底部导航时删除应用栏的后退按钮 - 颤动

使用底部导航栏导航回页面时颤动通过底部导航栏选择的索引

UITableView:向上滑动时收缩标签栏和导航栏

使用底部导航栏颤动保存 PageView 内每个页面的状态

如何使用颤动的底部导航栏导航到几个新页面?