代码之家  ›  专栏  ›  技术社区  ›  Daibaku

Flatter视频宽度未被Android和iOS底部导航栏填满

  •  1
  • Daibaku  · 技术社区  · 7 年前

    我在玩视频。
    没有底部导航栏,视图看起来很完美。
    宽度与设备的宽度相同。
    但使用底部导航栏时,宽度会变小一些。
    所以,视频的宽度并不能填满设备的宽度,而且两边都会有空白。
    我不知道出了什么问题。 就像这些图片

    密码

         // bottom navigation
                  return WillPopScope(
                  onWillPop: () async {
                    await Future<bool>.value(true);
                  },
                  child: CupertinoTabScaffold(
                  tabBar: CupertinoTabBar(
                  iconSize: 36.0,
                  activeColor: Colors.black,
                  inactiveColor: Colors.grey,
                  backgroundColor: Colors.white,
                  items: <BottomNavigationBarItem>[
                    BottomNavigationBarItem(
                      icon: Icon(Icons.home),
                      title: Container(),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(Icons.whatshot),
                      title: Container(),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(Icons.search),
                      title: Container(),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(Icons.subscriptions),
                      title: Container(),
                    ),
                  ],
                ),
                tabBuilder: (BuildContext context, int index) {
                  return CupertinoTabView(
                    builder: (_) {
                        return _pages[index];
                    },
                  );
                },
              ),
            );
    
     // video page
        return Scaffold(
          body: SafeArea(
            child: Stack(
              children: <Widget>[
                Center(
                  child: AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  )
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Icon(Icons.history, color: Colors.white)
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Icon(Icons.tag_faces, color: Colors.white),
                      Icon(Icons.lightbulb_outline, color: Colors.white)
                    ],
                  ),
                )
              ],
            )
          )
        );
    

    有人知道问题出在哪里吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   FuzzyNovaGoblin    7 年前

    底部导航栏不在堆栈中,因此它会缩小为堆栈分配的空间。视频具有设定的纵横比,因此当垂直空间减小时,宽度也减小。尝试将视频播放器包装到 FittedBox .

    FittedBox(fit: BoxFit.fitWidth, child: VideoPlayer(_controller));