时间戳

首页 > 解决方案 > 页面之间的底部导航栏

flutter - 页面之间的底部导航栏

问题描述

我正在尝试创建一个底部导航栏，它将在我的主屏幕和我的 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(

);
}
}

标签： flutterflutter-layout

解决方案

您需要使用 aTabBarView和 a TabController。

请参阅这本食谱以了解如何操作。

编辑 ：

脚手架的身体应该是TabBarView(children: tab)。

切换BottomNavigationBar为TabBar.

创建一个 TabController 作为状态成员：TabController _tabController;

像这样初始化它initState()：

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

TabBar最后，将和的控制器参数设置TabBarView为_tabController。

那应该这样做。

推荐阅读