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中设置全面屏适配比例。

 
        

你可能感兴趣的:(Flutter,flutter,全面屏,适配)