iOS 设备中 Flutter TabBarView 覆盖底部区域（Slider）

Posted 2023-02-23

【中文标题】iOS 设备中 Flutter TabBarView 覆盖底部区域（Slider）

【英文标题】：Flutter TabBarView cover bottom area (Slider) in iOS device

【发布时间】：2019-11-28 12:50:29

【问题描述】：

我在 Flutter 中比较新，我像这样写了简单的 TabBarView。

class MyApp extends StatelessWidget 
  @override
   Widget build(BuildContext context) 
    return new MaterialApp(
       theme: ThemeData(
        primaryColor: HexColor("#2E58A1"),
      ), 
      home: DefaultTabController(
        length: 4,
        child: new Scaffold(
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              new Page1(),
              new Page2(),
              new Page3(),
              new Container(
                color: Colors.red,
              ),
            ],
          ),
          bottomNavigationBar: new TabBar(
            tabs: [
              Tab(
                icon: new Icon(Icons.home),
              ),
              Tab(
                icon: new Icon(Icons.rss_feed),
              ),
              Tab(
                icon: new Icon(Icons.perm_identity),
              ),
              Tab(icon: new Icon(Icons.settings),)
            ],
            labelColor: HexColor("#2E58A1"),
            unselectedLabelColor: HexColor("#CBCCCD"),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: HexColor("#2E58A1"),
          ),
          backgroundColor: Colors.white,
        ),
      ),
    );
  

在原生 ios 应用程序中，它不会像这样重叠标签栏和滑块。

我应该如何重写我的代码？

【问题讨论】：

在颤振 Scaffold 本身提供的 bottomNavigationBar 接受一个小部件，查看一些教程。 willowtreeapps.com/ideas/…

【参考方案1】：

用 SafeArea 小部件包装您的 MaterialApp。

或者你可以用 SafeArea

包裹你的

TabBar

class MyApp extends StatelessWidget 
  @override
    Widget build(BuildContext context) 
    return new MaterialApp(
      theme: ThemeData(),
      home: SafeArea(
        child: DefaultTabController(
          length: 4,
          child: new Scaffold(
            body: TabBarView(
              physics: NeverScrollableScrollPhysics(),
              children: [
                new Page1(),
                new Page2(),
                new Page3(),
                new Container(
                  color: Colors.red,
                ),
              ],
            ),
            bottomNavigationBar: new TabBar(
              tabs: [
                Tab(
                  icon: new Icon(Icons.home),
                ),
                Tab(
                  icon: new Icon(Icons.rss_feed),
                ),
                Tab(
                  icon: new Icon(Icons.perm_identity),
                ),
                Tab(
                  icon: new Icon(Icons.settings),
                )
              ],
              labelColor: HexColor("#2E58A1"),
              unselectedLabelColor: HexColor("#CBCCCD"),
              indicatorSize: TabBarIndicatorSize.label,
              indicatorPadding: EdgeInsets.all(5.0),
              indicatorColor: HexColor("#2E58A1"),
            ),
            backgroundColor: Colors.white,
          ),
        ),
      ),
    );
  

【讨论】：

渲染时出错。我该如何解决？我尝试用 MediaQuery 包装，但不行。 SafeArea 小部件需要 MediaQuery 小部件祖先。

尝试只用安全区域包裹你的标签栏

成功了！谢谢你。您能否更新您的答案以供将来参考？

【参考方案2】：

将您的小部件包装到 SafeArea 中，它会添加足够的填充以避免操作系统的入侵

也建议设置

BottomNavigationBar(
...
elevation: 0,

根据这份报告：https://github.com/flutter/flutter/issues/21688

【讨论】：

渲染时出错。我该如何解决？我尝试用 MediaQuery 包装，但不行。 SafeArea 小部件需要 MediaQuery 小部件祖先。