Flutter MediaQuery简单使用

Stella981
• 阅读 832

1.通过MediaQuery.removePadding可以移除元素的pandding,需要注意要指定移除哪个方向的padding,例如移除上面的padding

MediaQuery.removePadding(
            removeTop: true,
            context: context,
            child: ,
)

2.获取状态栏高度

import 'dart:ui';
MediaQueryData.fromWindow(window).padding.top

同时我们也可以在flutter/src/material/constants.dart中查看flutter自带的AppBar的默认参数

/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

/// The height of the bottom navigation bar.
const double kBottomNavigationBarHeight = 56.0;

3.引入官方webview_flutter: ^0.3.7+1 ,提示错误需要使用AndroidX

'         *********************************************************'
'         WARNING: This version of ' + PLUGIN + ' will break your Android build if it or its dependencies aren\'t compatible with AndroidX.'
'         See https://goo.gl/CP92wY for more information on the problem and how to fix it.'
'         This warning prints for all Android build failures. The real root cause of the error may be unrelated.'
'         *********************************************************'

解决方法:
打开flutter的android宿主项目点击Refactor-Migrate to AndroidX

Flutter MediaQuery简单使用

image.png

接下来再弹出的窗口点击Do Refactor 让Android Studio自动将项目转化为AndroidX依赖

Flutter MediaQuery简单使用

转化完毕后可以clean Project看看还有其他错误没,没有错误后回到Flutter项目运行即可

点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
tidb损坏tikv节点怎么恢复集群
tikv节点宕机(机器再起不来),或者数据节点被rmrf 掉了怎么办正常情况下tikv节点down掉了。此时不要去执行store delete store\_id。数据一般可以正常访问,但是如果永久损坏的tikv节点。我们总想要把它移除。如何移除呢? (移除kv节点过程中,如果kv节点健康在线,可以实现动态移除。如果kv节点不可用,可能导致访
晴空闲云 晴空闲云
2年前
JavaScript用html5新方法操作元素类名
现在网页中类属性使用越来越多,经常会通过增加类、移除类给指定的元素修改样式效果。早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性,非常方便。classList先看如下代码:html栏目1栏目2栏目3//获取到当前的li元素letacti
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Easter79 Easter79
2年前
springboot项目打成war包
在某种情况下,比如。。。。。。。。。。之下,我们不得不,将springboot打成war包1、在pom.xml文件中修改<packagingwar</packaging2、移除springboot自带的tomcat<!移除自带的tomcat<dependency<groupIdorg.spri
陈占占 陈占占
2年前
PHP 利用confirm删除指定数据库的数据
完整的效果图方法一a标签href中的是你要删除记录html<ahref"PHPtest.php?name1"onclick"returnconfirm('是否要移除该小说?')"方法二下面这个方法是js代码,点击获取id,弹出提示框,确定是否删除,confirm好像可以返回true或者falsejavascriptfunctiond
Wesley13 Wesley13
2年前
Tomcat 正式环境下多个Context配置
Tomcat中给server.xml加入<Context元素<Context代表了运行在<Host上的单个Web应用,一个<Host可以有多个<Context元素,每个Web应用必须有唯一的URL路径,这个URL路径在<Context中的属性path中设定。<Context path"/helloApp1" docBa
Stella981 Stella981
2年前
Service Mesh 网红 ,istio
变化变化项类型1.6(.3)1.5或之前意义移除组件Citadel、SidecarInjector、Galley1.5为完成的收尾强化功能项删减的功能,合并入Istiod替换安装增加:istioctlinstall;替换manifestapply移除配置废弃的Hel
Stella981 Stella981
2年前
Angular 学习系列
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,本兽会将功能相似相近的一类整合到一篇文章,方便理解和记忆。这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断。ngIfngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。格式:ngif“valu
Wesley13 Wesley13
2年前
IDEA实用设置,提高开发速度。
1.代码提示设置FileSettingsKeymapMainmenuCodeCompletionBasic右键点击RemoveKey移除掉默认快捷键,再Add一个新的快捷键。当然Alt/已经被占用了,可以找到(搜索框右边那个放大镜,点一下按对应的快捷键就可以搜索,注意是右边)删掉,也可以设置别的。SmartType
Wesley13 Wesley13
2年前
Java并发 阻塞队列
阻塞队列(BlockingQueue)是一个支持两个附加操作的队列。这两个附加操作支持阻塞地插入和移除方法。支持阻塞插入的方法是指当队列满时会阻塞插入元素的线程,直到队列不满;支持阻塞移除的方法是指当队列为空时获取元素的线程无法继续获取元素直到队列不空。可以发现阻塞队列非常适合消费者和生产者场景下进行使用,生产者生产数据就是向阻塞队列中插入元素,消费者消