在一个返回错误的Flutter应用程序中添加底部栏

Question

在我的flutter应用程序中，我有一个主页。dart中有一个Scaffold和ListView，它是容器的子组件。我在一个单独的文件中创建了一个底部栏，我想把它添加到home_screen页面，并在那里固定它，但我得到下面的错误:

I/flutter (25157): RenderRepaintBoundary object was given an infinite size during layout.
I/flutter (25157): This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.
I/flutter (25157): The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#cb38f relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (25157):   creator: IndexedSemantics ← _SelectionKeepAlive ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ← Viewport ← IgnorePointer-[GlobalKey#2f499] ← Semantics ← ⋯
I/flutter (25157):   parentData: index=2; layoutOffset=None (can use size)
I/flutter (25157):   constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (25157):   size: MISSING
I/flutter (25157):   index: 2
I/flutter (25157): The constraints that applied to the RenderRepaintBoundary were:
I/flutter (25157):   BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (25157): The exact size it was given was:
I/flutter (25157):   Size(411.4, Infinity)

这是home_screen

@Override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Styles.bgColor,
body: ListView(
children: [
Container(
padding: const EdgeInsets.symmetric (horizontal: 20), 
child: Column(
children: [
const Gap (40),
Row (...), // Row
const Gap (20),
Container (...), // Container
const Gap (20),
Container(...), // Container
const Gap (20),
Container (...) // Container
],
), // Column
), // Container
const Gap (25),
const BottomBar(), <---------------------- Error is from here its placement 
],
), // ListView
); // Scaffold
}

下面是底部栏:

class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
@override
State<BottomBar> createState() => _BottomBarState();}
class _BottomBarState extends State<BottomBar> {
int _selectedIndex = 0;
static final List<Widget> _widgetOptions = <Widget>[
HomeScreen(),
const Text("1"),
const Text("2"),
const Text("3")  ];
..........................
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetOptions[_selectedIndex],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
..........................
elevation: 10,
items: const [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem()
],      ),    );  }}

如何修复这个错误，以保持底部栏显示在主屏幕

Answer 1

class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
@override
State<BottomBar> createState() => _BottomBarState();}
class _BottomBarState extends State<BottomBar> {
int _selectedIndex = 0;
static final List<Widget> _widgetOptions = <Widget>[
HomeScreen(),
const Text("1"),
const Text("2"),
const Text("3")  ];
..........................
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetOptions[_selectedIndex],
),
bottomNavigationBar: Column(mainAxisSize: MainAxisSize.min,children:[
BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
..........................
elevation: 10,
items: const [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem()
],      ),    );])  }}

检查我上面的代码

添加底部导航栏到列小部件使用mainAxisSize**，因为我们需要指定适当的高度

Answer 2

尝试将BottomBar小部件放入Flex小部件中。

Answer 3

我刚刚测试了下面的代码，它对我有效。我得到一个可滚动的ListView和一个底部栏，没有布局错误。(为了简单起见，只显示构建方法)

你需要把底部栏放在底部导航栏属性中。此外，你不应该在你的底部栏有脚手架，它只用于你的屏幕布局。

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: [
// your list of children
],
),
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',
),
],
selectedItemColor: Colors.amber[800],
),
);

}