这是我的代码。准确地说,底部导航栏溢出了 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),
),
),
),
),
],
),
),
);
}
}
只需使用 Wrap Widget 扭曲您的 BottomNavigationBar。
我认为您使用的
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),
),
),
),
),
],
),
),
);
}
}
这似乎是 ScrollBottomNavigationBar 的问题。如果您应用较小的字体大小和图标大小,它将起作用。
ScrollBottomNavigationBar(
controller: controller,
items: items,
iconSize: 8,// ADD THIS
selectedFontSize: 4,// ADD THIS
)
所以这是 ScrollBottomNavigationBar 实现的问题。
只需用 SafeArea 包裹 Scaffold,它就能解决你的问题...