Flutter全屏幕适配指南

本文介绍了在Dart端如何使用SafeArea和MediaQuery进行屏幕适配,展示了两种不同的实现方式,分别通过直接包裹布局和获取屏幕边缘padding来确保内容不被遮挡。同时,对于Android端,讨论了在AndroidManifest.xml中设置全面屏适配比例的方法,以达到良好的显示效果。
摘要由CSDN通过智能技术生成
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中设置全面屏适配比例。

 <!-- 全面屏适配 -->
        <meta-data
            android:name="android.max_aspect"
            android:value="2.3" />
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值