在回傳錯誤的Flutter應用程式中添加BottomBar

在我的 flutter 應用程式中，我有一個 home_screen.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)

這是主螢屏

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

如何修復此錯誤以保持底部欄顯示在主螢屏上

uj5u.com熱心網友回復：

嘗試將BottomBar小部件放入Flex小部件中。

uj5u.com熱心網友回復：

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**將 BottomNavigationBar 添加到Column小部件中，因為我們需要指定適當的底部欄高度。

uj5u.com熱心網友回復：

我剛剛測驗了以下代碼，它對我有用。我得到一個可滾動的 ListView 和一個 BottomBar，沒有布局錯誤。（為了簡單起見，只顯示構建方法）

您需要將 BottomBar 放在 bottomNavigationBar 屬性中。此外，您不應該在 BottomBar 中使用 Scaffold，它僅用于螢屏布局。

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

}

標籤：扑镖

上一篇：在initState和不在initState中初始化控制器的區別

下一篇：將函式傳遞給小部件并在按鈕按下時呼叫函式