BottomNavigationBar 在颤动中溢出

Question

这是我的代码。准确地说，底部导航栏溢出了 12 和 26 像素。任何解决方案？** 尝试了各种方式。我还创建了我的自定义底部导航栏小部件并将其放置在扩展小部件下方。我得到了同样的错误（溢出值不同）。 现在，我正在使用一个名为 ScrollBottomNavigationBar 的颤振包。

import 'package:flutter/material.dart';
import 'package:justchat/components/bottom_navigation_bar.dart';
import 'package:justchat/components/input_box.dart';
import 'package:justchat/constants.dart';
import 'package:justchat/screens/login_screen.dart';
import 'package:scroll_bottom_navigation_bar/scroll_bottom_navigation_bar.dart';

class HomeScreen extends StatelessWidget {
  final controller = ScrollController();
  final items = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(
        Icons.home,
        size: 10,
      ),
      label: ("Home"),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.settings,
      ),
      label: ("Settings"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(30),
          topLeft: Radius.circular(30),
        ),
        child: Wrap(
          children: [
            ScrollBottomNavigationBar(
              controller: controller,
              items: items,
            ),
          ],
        ),
      ),
      body: SafeArea(
        // bottom: false,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                    left: 30.0,
                  ),
                  child: Container(
                    child: Text(
                      "Message",
                      style: kLargeTextStyle,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    right: 22,
                  ),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      color: kActiveSecondaryColor,
                    ),
                    child: Icon(
                      Icons.person,
                      color: kTabsColor,
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                InputBox(
                  padding: EdgeInsets.only(
                    left: 25,
                    right: 25,
                    top: 30,
                  ),
                  hintText: "Find your friends?",
                ),
                Padding(
                  padding: EdgeInsets.only(
                    top: 40.0,
                    right: 30.0,
                  ),
                  child: GestureDetector(
                    onTap: () {
                      print("Search button Pressed");
                    }, //Functionality
                    child: Container(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.search,
                        size: 40,
                        color: kChatscreenSecondaryColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: kTabsColor,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(40),
                    topLeft: Radius.circular(40),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

这似乎是 ScrollBottomNavigationBar 的问题。如果您应用较小的字体大小和图标大小，它会起作用。

ScrollBottomNavigationBar(
              controller: controller,
              items: items,
              iconSize: 8,// ADD THIS
              selectedFontSize: 4,// ADD THIS
            )

所以这是 ScrollBottomNavigationBar 实现的问题。

Answer 2

我认为您使用的 ScrollBottomNavigationBar 软件包有问题。因为我复制了你的代码并把它变成了简单的BottomNavigationBar，它工作正常。

你可以尝试两件事：

• 尝试在您的小部件树中使用MediaQuery.of(context)size.height * <some multiple>.e.g. 提供heights。 height: MediaQuery.of(context).size.height * 0.2
• 用SingleChildScrollView 包裹你的Column

下面是我从你那里编辑的代码和屏幕：

class HomeScreen extends StatelessWidget {
  final controller = ScrollController();
  final items = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(
        Icons.home,
        // size: 10,
      ),
      label: ("Home"),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.settings,
      ),
      label: ("Settings"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: items,
      ),
      body: SafeArea(
        // bottom: false,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                    left: 30.0,
                  ),
                  child: Container(
                    child: Text(
                      "Message",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    right: 22,
                  ),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      // color: kActiveSecondaryColor,
                    ),
                    child: Icon(
                      Icons.person,
                      color: Colors.purple,
                      size: 50,
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(10, 25, 0, 0),
                  child: Container(
                    padding: EdgeInsets.all(10.0),
                    width: 380,
                    height: 70,
                    color: Colors.grey[200],
                    child: Text(
                      "Find you Friends?",
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(
                    top: 40.0,
                    right: 30.0,
                  ),
                  child: GestureDetector(
                    onTap: () {
                      print("Search button Pressed");
                    }, //Functionality
                    child: Container(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.search,
                        size: 40,
                        // color: kChatscreenSecondaryColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(40),
                    topLeft: Radius.circular(40),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

图片