Flutter全屏幕适配指南

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" />

这篇好文章是转载于：学新通技术网