0

这是我的代码。准确地说，底部导航栏溢出了 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),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

屏幕截图

4

2 回答 2

0

我认为ScrollBottomNavigationBar您使用的软件包有问题。因为我复制了您的代码并将其变得简单BottomNavigationBar并且运行良好。

您可以尝试两件事：

  • 尝试使用.eg提供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),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

图片 在此处输入图像描述

于 2020-12-04T06:44:02.173 回答
0

这似乎是 ScrollBottomNavigationBar 的问题。如果您应用较小的 Font Size 和 Icon Size，它将起作用。

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

所以这是 ScrollBottomNavigationBar 实现的问题。

于 2020-12-04T07:36:12.480 回答