Flutter调用自定义BottomBar组件导致其他Widget消失求助

问题描述 #

每当调用自定义的BottomBar组件时，页面中的其他Widget元素都会消失。移除bottomNavigationBar: BottomBar(),代码后页面恢复正常。

相关代码 #

home_page.dart #

import 'package:clothing_app/utils/bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:line_awesome_icons/line_awesome_icons.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int buttonSelected = 1;
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        bottomNavigationBar: BottomBar(),
        appBar: AppBar(
          elevation: 0,
          backgroundColor: SCAFFOLD_BG_COLOR,
          leading: IconButton(
            onPressed: () {},
            icon: Icon(
              LineAwesomeIcons.bars,
              color: MAIN_BLACK_COLOR,
            ),
          ),
          actions: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(
                LineAwesomeIcons.search,
                color: MAIN_BLACK_COLOR,
              ),
            ),
          ],
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: SingleChildScrollView(
                            padding: EdgeInsets.symmetric(
                                vertical: 12, horizontal: 16),
                            scrollDirection: Axis.horizontal,
                            child: Row(
                              children: <Widget>[
                                _topSlideItem(),
                                SizedBox(
                                  width: 24,
                                ),
                                _topSlideItem(),
                                SizedBox(
                                  width: 24,
                                ),
                                _topSlideItem(),
                                SizedBox(
                                  width: 24,
                                ),
                                _topSlideItem(),
                                SizedBox(
                                  width: 24,
                                ),
                                _topSlideItem(),
                                SizedBox(
                                  width: 24,
                                ),
                                _topSlideItem(),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Padding(
                      padding:
                          EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'Best of the week',
                            style: TextStyle(
                                fontSize: 22, fontWeight: FontWeight.bold),
                          ),
                          SizedBox(
                            height: 24,
                          ),
                          verticalSlideItem(),
                          SizedBox(height: 16),
                          verticalSlideItem(),
                          SizedBox(height: 16),
                          verticalSlideItem(),
                          SizedBox(height: 16),
                          verticalSlideItem(),
                          SizedBox(height: 16),
                          verticalSlideItem(),
                          SizedBox(height: 16),
                          verticalSlideItem(),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _topSlideItem() {
    return Material(
      borderRadius: BorderRadius.circular(32),
      color: Colors.white,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 32),
        width: MediaQuery.of(context).size.width * .55,
        child: Row(
          children: <Widget>[
            Image.asset(
              'assets/img.jpeg',
              height: 140,
              width: 50,
              fit: BoxFit.fitHeight,
            ),
            SizedBox(width: 24),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Flower patterned khaki dress',
                    style: TextStyle(
                      fontSize: 18, fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    height: 12,
                  ),
                  Row(
                    children: <Widget>[
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 12,
                  ),
                  Text(
                    '\$89,99',
                    style: TextStyle(
                      fontSize: 16, fontWeight: FontWeight.bold,
                      color: Color.fromRGBO(180, 184, 190, 1),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget verticalSlideItem() {
    return Material(
      borderRadius: BorderRadius.circular(32),
      color: Colors.transparent,
      child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(24)),
              child: Center(
                child: Image.asset(
                  'assets/img.jpeg',
                  height: 110,
                  width: 80,
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),
            SizedBox(width: 24),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Flower patterned\nkhaki dress',
                    style: TextStyle(
                      fontSize: 20, fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    height: 12,
                  ),
                  Row(
                    children: <Widget>[
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Container(
                        height: 12,
                        width: 12,
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 12,
                  ),
                  Text(
                    '\$89,99',
                    style: TextStyle(
                      fontSize: 16, fontWeight: FontWeight.bold,
                      color: Color.fromRGBO(180, 184, 190, 1),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

bottom_bar.dart #

// 原代码缺失类定义，以下是补全后的代码框架
class BottomBar extends StatelessWidget { // 或StatefulWidget，根据需求调整
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Calls',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Camera',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Chats',
            ),
          ],
        ),
      ),
    );
  }
}

main.dart #

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'Cera'),
      home: HomePage(),
    );
  }
}

效果截图 #

• 调用BottomBar时的页面：
• 移除BottomBar时的页面：

解决方案 #

问题根源是BottomBar组件中嵌套了Scaffold——Scaffold是全屏组件，会完全覆盖父级Scaffold的内容，导致原页面的AppBar和Body被隐藏。

修改bottom_bar.dart，直接返回BottomNavigationBar即可，不需要外层的Container和Scaffold：

class BottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.call),
          label: 'Calls',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.camera),
          label: 'Camera',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.chat),
          label: 'Chats',
        ),
      ],
    );
  }
}

注意：原bottom_bar.dart代码缺少类的定义，需要补全class BottomBar extends StatelessWidget {（如果是需要状态管理的底部导航，可改为StatefulWidget）。

内容的提问来源于stack exchange，提问作者Aras