页面之间的底部导航栏

我正在尝试创建一个底部导航栏,该栏将在我的主屏幕和Settigns屏幕之间切换。我试图这样做,但是将列表添加到Stful小部件的顶部似乎不起作用,我试图添加列表以便可以切换页面。但是将列表添加到我的身体的开始似乎没有帮助。 这是我尝试的:

class _HomeState extends State<Home> {
var temperature;
var humidity;

//Bottom navigation bar stuff
int _currentIndex = 0;

final tab = [
    Home(),
    Settings(),
],

@override
void initState () {
this.getWeather();
super.initState();
}

@override
Widget build(BuildContext context) {

final AuthService _auth = AuthService();

final user = Provider.of<User>(context);

return  StreamBuilder<UserData>(
        stream: DatabaseService(uid: user.uid).userData,
        builder : ((context, snapshot){
          if (!snapshot.hasData) {
           return  Loading();
          }
          UserData userData = snapshot.data;
          List<bool> cardsValue = [userData.device1, userData.device2, userData.device3, false];
          return Scaffold(
         //Nav part
            bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.grey[900],
            currentIndex: _currentIndex,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home, color: Colors.white,),
                title: Text("Home",style: TextStyle(color: Colors.white),)
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.settings,
                  color: Colors.white,
                  ),
                title: Text(
                  "Settings", 
                  style: TextStyle(color: Colors.white),)
              )
            ],
            onTap: (int index){
              setState(() {
                this._currentIndex  = index;
              });
            },
          ),
            backgroundColor: Colors.grey[900],
            appBar: AppBar(
              elevation: 0,
              backgroundColor: Colors.grey[900],
              title: Row(
              ...
            body: SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(12, 20, 12, 0),
                  child: Column(
                    children: <Widget>

当按下设置图标时,这是我要去的地方:

import 'package:flutter/material.dart';

class Settings extends StatefulWidget {
@override
_SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
@override
Widget build(BuildContext context) {
 return Scaffold(

);
}
}
评论
qquasi
qquasi

You need to use a TabBarView along with a TabController.

See this cookbook to learn how to.

编辑:

The Scaffold's body should be TabBarView(children: tab).

Switch the BottomNavigationBar for a TabBar.

Create a TabController as a state member : TabController _tabController;

Initialize it in the initState() like this :

_tabController = TabController(vsync: this, length: 2);

And finally, set the controller parameter for the TabBar and TabBarView to _tabController.

那应该做。

点赞
评论