美文网首页
flutter屏幕尺寸计算问题

flutter屏幕尺寸计算问题

作者: 温水煮青蛙a | 来源:发表于2023-06-06 17:13 被阅读0次
var kwidth = MediaQuery.of(context).size.width;
    var kheight = MediaQuery.of(context).size.height;
    var paddingT = MediaQuery.of(context).padding.top;
    var paddingB = MediaQuery.of(context).padding.bottom;
针对没有appBar: AppBar(title: Text("A"),),。这就是显示区域的全屏
width: kwidth, 
height: kheight,
整个屏幕宽高就是显示页面宽高
return Scaffold(
      backgroundColor: Colors.blue,
      body: Stack(
        children: [
          Positioned(
            child: Container(
                width: kwidth, 
                height: kheight, 
                color: Colors.grey,
            ),
          ),
        ],
      ),
    );
针对有appBar: AppBar(title: Text("A"),),。
width: kwidth,
height: kheight - paddingT - kToolbarHeight,  
显示页面高度需要减状态栏高度paddingT
显示页面高度需要减导航栏高度kToolbarHeight
return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("A"),
      ),
      body: Stack(
        children: [
          Positioned(
            child: Container(
              width: kwidth,
              height: kheight - paddingT - kToolbarHeight,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
有时候还需要考虑底部安全区域
height: kheight - paddingT - kToolbarHeight - paddingB,  
SafeArea组件帮我们剪掉了paddingT和paddingB

相关文章

网友评论

      本文标题:flutter屏幕尺寸计算问题

      本文链接:https://www.haomeiwen.com/subject/xopgedtx.html