Skip to content

视频横竖屏切换后的适配问题(使用的是flutter_screenutil) #59

@yujieliang

Description

@yujieliang

问题效果图:
全屏前:
11111111111

全屏后再次恢复成竖屏:
1569425081940

我的适配是用的框架flutter_screenutil,视频的container宽高设置为
width: ScreenUtil.screenWidthDp,
height: ScreenUtil.screenWidthDp0.5625, (16:9)
进入全屏后,宽度值即为屏幕的高度,退出全屏ScreenUtil.screenWidthDp获取到的宽度依然为屏幕的高度,所以导致ScreenUtil.screenWidthDp
0.5625比实际的大
代码:

Widget get videoSection {
    return Container(
        width: ScreenUtil.screenWidthDp,
        height: ScreenUtil.screenWidthDp*0.5625,
        color: Colors.white,
        alignment: Alignment.center,
        child: _video==''?
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('添加顶部宣传视频',
              style: TextStyle(
                color: Colors.grey,
                fontSize: ScreenUtil().setSp(29.0),
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
              decoration: BoxDecoration(
                  border: new Border.all(color: Colors.red[500], width: 1), // 边色与边宽度
                  borderRadius: BorderRadius.all(Radius.circular(5))
              ),
              child: Text('添加视频',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: ScreenUtil().setSp(28.0),
                ),
              ),
            )
          ],
        ): Container(
          child: FijkView(
            player: player,
          ),
        )
    );
  }

解决办法:
宽度的获取改成通过MediaQuery.of(context).size.width去获取,这样获取的宽度不会随着全屏而变化
代码:

Widget get videoSection {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.width*0.5625,
        color: Colors.white,
        alignment: Alignment.center,
        child: _video==''?
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('添加顶部宣传视频',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 15,
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
              decoration: BoxDecoration(
                  border: new Border.all(color: Colors.red[500], width: 1), // 边色与边宽度
                  borderRadius: BorderRadius.all(Radius.circular(5))
              ),
              child: Text('添加视频',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 15,
                ),
              ),
            )
          ],
        ): Container(
          child: FijkView(
            player: player,
            fit: FijkFit.ar16_9,
          ),
        )
    );
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    UIProblems about flutter UIgood first issueGood for newcomers

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions