bottomNavigationBar 未显示 - Flutter答案

【问题标题】：bottomNavigationBar not showing up - FlutterbottomNavigationBar 未显示 - Flutter
【发布时间】：2022-01-19 18:48:31
【问题描述】：

我正在尝试在 Scaffold 中实现底部导航栏小部件，但由于某种未知原因，小部件的内容 (bottomNavigationBar) 没有出现

这是我的代码

class _ChatScreenState extends State<ChatScreen> {

  final TextEditingController messageController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Title'.toUpperCase()),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
      ),
      bottomNavigationBar: Row( // Nothing showing up
        children: [
          TextField(
            controller: messageController,
            autofocus: false,
            keyboardType: TextInputType.text,
            decoration: const InputDecoration(
              hintText: 'Message',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(5.0))
              )
            ),
          ),
          TextButton(
            onPressed: (){},
            style: ButtonStyle(
                padding: MaterialStateProperty.all(const EdgeInsets.all(10.0)),
                backgroundColor: MaterialStateProperty.all(Colors.redAccent)
            ),
            child: Text('Send'.toUpperCase()),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

你有一行作为你的 bottomNamvigationBar 的孩子

 bottomNavigationBar: Row( // Nothing showing up ...)

你需要作为孩子：BottomNavigationBar(items:[])

bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),

【讨论】：