Flutter全屏幕适配指南

Flutter全屏幕适配指南,第1张

Dart端 SafeArea

第一种是使用SafeArea包裹跟布局,灵活性不够好。

实例代码:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('顶部'),
              Text('底部'),
            ],
          ),
        )));
  }
MediaQuery

第二种是使用MediaQuery API获取padding,可以灵活设置顶部和底部边距。

@override
  Widget build(BuildContext context) {
    EdgeInsets padding = MediaQuery.of(context).padding;
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          padding: EdgeInsets.fromLTRB(0, padding.top, 0, padding.bottom),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('顶部'),
              Text('底部'),
            ],
          ),
        ));
  }
Android端

AndroidManifest.xml中设置全面屏适配比例。

 
        

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/992200.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存