Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yujieliang opened this issue Sep 25, 2019 · 2 comments
Closed

Comments

@yujieliang
Copy link

@yujieliang yujieliang commented Sep 25, 2019

问题效果图:
全屏前:
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,
          ),
        )
    );
  }
@befovy

This comment has been minimized.

Copy link
Owner

@befovy befovy commented Sep 25, 2019

@all-contributors please add @yujieliang for question

@allcontributors

This comment has been minimized.

Copy link
Contributor

@allcontributors allcontributors bot commented Sep 25, 2019

@befovy

I've put up a pull request to add @yujieliang! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.