Android和iOS均未用底部导航栏填充抖动视频宽度

时间:2018-12-09 15:30:41

标签: dart flutter

我正在播放视频。
 而且没有底部导航栏,视图看起来很完美。
宽度与设备的宽度相同。
但是使用底部导航栏,宽度会变小。
因此,视频的宽度无法填充设备的宽度,并且两侧都会留有空白。
我不知道出什么问题了。 喜欢这些图片

代码

     // 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 个答案:

答案 0 :(得分:0)

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

FittedBox(fit: BoxFit.fitWidth, child: VideoPlayer(_controller));
相关问题