Flutter BottomNavigationBar 计算器

Question

我从 Flutter 开始，我在导航栏上苦苦挣扎，如果我添加 body，我会不断收到 Whosebug。如果我不添加 body 一切都很好。错误：

    The following WhosebugError was thrown building DefaultTextStyle(debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2), inherit: false, color: Color(0xdd000000), family: Roboto, size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping at box width, overflow: clip):
Stack Overflow

The relevant error-causing widget was: 
  Scaffold Scaffold:file:///Users/salvatorelafiura/git/energy_flutter/lib/screen/main.dart:104:12
When the exception was thrown, this was the stack: 
#0      new Uint8List (dart:typed_data-patch/typed_data_patch.dart:2201:3)
#1      _createTables.<anonymous closure> (dart:core/uri.dart:3872:60)
#2      new _GrowableList.generate (dart:core-patch/growable_array.dart:133:28)

当前widget的代码，三屏一bottomNavigation。

Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widgetTitle.elementAt(selectedIndex)),
            actions: <Widget>[
              IconButton(
                icon: const Icon(
                  Icons.logout,
                  color: Colors.white,
                ),
                onPressed: () {
                  signOut();
                },
              )
            ],
          ),
          body: Center(
            child: IndexedStack(index: selectedIndex, children: tabPages),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "Pratica"),
              BottomNavigationBarItem(icon: Icon(Icons.mail), label: "Messages"),
              BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profilo"),
            ],
            currentIndex: selectedIndex,
            onTap: onItemTapped,
            backgroundColor: Colors.white,
            fixedColor: Colors.blue,
            selectedLabelStyle: const TextStyle(color: Colors.red, fontSize: 20),
            unselectedFontSize: 16,
            selectedIconTheme:
                const IconThemeData(color: Colors.blue, opacity: 1.0, size: 30.0),
            unselectedItemColor: Colors.grey,
            unselectedLabelStyle: const TextStyle(fontSize: 18, color: Colors.pink),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }

Answer 1

创建一个单独的 Class "Bottom" 并将 Bottomnavigationbar 的整个代码放入 class 然后在每个屏幕上调用 Scaffold喜欢：

bottomNavigationBar: Bottom();

然后在全球范围内声明您的 int selectedIndex = 0; 它会很好用。

修改给定代码：

import 'package:flutter/material.dart';

int _selectedIndex = 0;

class Bottom extends StatefulWidget {
  @override
  _BottomState createState() => _BottomState();
}

class _BottomState extends State<Bottom> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        
        showSelectedLabels: true, // <-- HERE
        showUnselectedLabels: true,
        backgroundColor: Color(0xff38547C),
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        selectedItemColor: Color(0xFF1C2834),
        unselectedItemColor: Colors.white,
        items: [
          BottomNavigationBarItem(
            icon: const Icon(
              Icons.home,
            ),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage("assets/images/ball.png"),
            ),
            label: "Matches",
          ),
          BottomNavigationBarItem(
              icon: const Icon(
                Icons.live_tv,
              ),
              label: "Live"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.poll,
              ),
              label: "Ranking"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.more_horiz,
              ),
              label: "More"),
        ],
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
          });
          if (_selectedIndex == 0) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Home());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 1) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Matches());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 2) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Live());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 3) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Ranking());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 4) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => More());
            Navigator.of(context).push(route);
          }
        });
  }
}

Flutter BottomNavigationBar 计算器

Flutter BottomNavigationBar stackoverflow

appbar

scaffold

flutter

flutter-bottomnavigation