底部导航栏在颤动中溢出

Question

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

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

只需使用 Wrap Widget 扭曲您的 BottomNavigationBar。

Answer 2

我认为您使用的

ScrollBottomNavigationBar

软件包有问题。因为我复制了你的代码并将其变成简单的

BottomNavigationBar

并且它工作正常。

您可以尝试的两件事：

• 尝试使用

  heights

  在您的小部件树中给出

  MediaQuery.of(context)size.height * <some multiple>

  。

  height: MediaQuery.of(context).size.height * 0.2

• 用

  Column

   包裹你的 

  SingleChildScrollView

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

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),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

图片

Answer 3

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

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

所以这是 ScrollBottomNavigationBar 实现的问题。

Answer 4

只需用 SafeArea 包裹 Scaffold，它就能解决你的问题...