Flutter ListView 解决IOS底部或顶部留白问题

最新推荐文章于 2023-11-05 12:48:37 发布
最新推荐文章于 2023-11-05 12:48:37 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： Flutter 文章标签： flutter ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/believeinbelieve/article/details/123210356
版权
本文讲述了在安卓上正常的ListView在iOS中底部出现空白的问题，解决办法是在不与AppBar配合时，通过 MediaQuery.removePadding 去除头部padding，适用于ListView的布局调整。
摘要由CSDN通过智能技术生成

最近发现一个很奇怪的问题，ListView在安卓上布局正常，在ios上会出现底部留有一段空白

原因：在ListView没有和AppBar一起使用时，头部会有一个padding，为了去掉padding，在外层使用MediaQuery.removePadding即可，如下：

MediaQuery.removePadding(
context: context,
removeTop: true,
removeBottom: true,
child: ListView.builder(

shunsix
关注
专栏目录
Flutter开发：解决ListView顶部有留白的方法
软贱开发攻城狮
02-12 1万+
前言 在Flutter开发中，开发者对于ListView组件的使用并不陌生，因为常规的业务需求基本必会涉及到列表或者滑动，这就必会使用ListView。关于ListView的常规使用，一般查看官方文档都能找到对应的API，这里就不再多少。但是对于一些不常用的使用还是要知道的，那么本篇博文就来分享一下关于解决ListView的使用中常见问题之一：ListView顶部留白问题，方便查阅使用。 描述 在Flutter中ListView顶部默认状态下会有空白问题，会看到ListView头部有一点空白区域，
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作，就能解决问题了。 如果是用vue写的： <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加： fixScroll() { window.scrollTo(0, 0); } 因为这个问题只在iOS端出现所以使用前进行一下判断： fixScroll(
Flutter ListView解决底部或顶部留白问题
坚果的博客
10-07 1822
Flutter ListView解决底部或顶部留白问题 在没有设置padding的情况下，上下都有留白 方法一： ListView.builder( padding: EdgeInsets.zero, itemCount: ..., itemBuilder: ..., ); 后来发现，listview不和appbar一起使用时，会有一个默认的padding 想要去掉这个padding，在外层使用MediaQuery.removePadding即可 MediaQ
[Flutter] 去掉 ListView 上默认的的 top-padding
SmileSB101-(ZXB)的博客
06-21 877
官方 issue 地址 起因 使用 Drawer 的时候，想在其中使用 ListView 来展示数据，但是发现在 DarwerHeader（ListView 布局上面的 一个 Widget）与 ListView 之间有一个明显的空白间隙，设置Header 部分颜色为 blue 和 ListView 部分为 amber 之后更为明显。 可以看到 blue 与 amber 之间，有一个很宽的间隔（并且使用布局分析发现其是 SliverPadding）。 原因 可滚动的 View 会添加一个默认的 paddin
Flutter项目在 iOS14 启动崩溃的解决方法
01-21
下面看下Flutter项目在 iOS14 启动崩溃的问题及解决方法 崩溃现象 在iOS14发布之后，运行APP就出现闪退，和机型没关，只要是iOS 14就必闪退 崩溃分析 1、启动就闪退，多起几次可能有一次没有问题。 2、启动后到某个...
Flutter – ListView5 – Expanded保持控件居于底部
01-07
ListView5 代码 import 'package:flutter/material.dart'; import 'package:flutter_app/jhImageTool.dart'; var dataArr; var phone = 1234xxxx1234; var address = 这是地址; var range = 这是描述这是描述; var ...
Flutter-使用MethodChannel 实现与iOS交互
最新发布
06-13
然而，当涉及到与原生 iOS 系统的深度交互时，单纯使用 Flutter 的功能是不够的，这时候就需要借助 `MethodChannel`。`MethodChannel` 是 Flutter 和原生平台之间进行通信的一种方式，它允许我们在 Flutter 代码中...
Flutter ListView列表布局
10-05
ListView 是最常用的滚条列表，它继承至 CustomScrollView，大多 CustomScrollView 的属性都可用。
ListView顶部或底部多出padding
androidhyf的博客
01-07 587
1.ListView没有被Scaffold包裹时，在底部会多出一块padding空白 2.ListView被Scaffold包裹但没有AppBar时，在顶部会多出一块padding空白 MediaQuery.removePadding( context: context, removeTop: true, child: Container( child: ListView( padding: EdgeInsets.only(top:
页面内容不足以铺满屏幕高度时，footer居底显示
夏天的甲虫
11-08 1万+
页面内容不足以铺满屏幕高度时，footer居底显示
【ios兼容】处理ios页面底部留白问题
tuzi007a的博客
09-22 433
【ios兼容】处理ios页面底部留白问题
滑动listview隐藏和显示顶部布局
weixin_34258078的博客
09-27 264
需求： 1.listview向下滑动时，隐藏顶部布局 2.listview向上滑动到最上面，显示顶部布局 3.顶部布局的隐藏和显示有过渡效果 4.第一次加载listview时，顶部不要隐藏 布局： 注意：android:animateLayoutChanges="true"添加在需要隐藏显示布局的父布局中才能有过渡效果 &lt;?xml version="1.0" encodin...
Android：ListView.addHeaderView()用法及其注意事项
热门推荐
iblade的博客
03-22 2万+
一、 概述：在代码中使用 listView.addHeaderView(…) 方法可以在ListView组件上方添加上其他组件，并且连结在一起像是一个新组件。如果多次使用 .addHeaderView(…) ,则最先添加的组件在最上方，按添加的先后顺序由上到下罗列。 此时listView 的 position = 0 的位置对应的是view1，而不再是原来listView中的第一条了。如下图所示：
android scrollview 嵌套listview底部大量空白
冰天糖葫芦的博客
08-04 777
android scrollview 嵌套listview有两种办法，其中一种是重写绘制方法，比如： @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST
flutter入门之兼容Android和IOS的状态栏
不忘初心
01-03 7051
    【原创不易，转载请注明出处：https://blog.csdn.net/email_jade/article/details/85701437】     flutter最大的优势是跨平台，Android和IOS可以共用同一套代码，不过我们在开发的过程中，还是有些地方需要单独定制的，比如说应用图标，比如说应用启动图（splash），还有就是插件开发，今天我们要讲的是IOS和Android的...
原生Android10底部白条,Flutter 10: 图解底部状态栏小尝试
weixin_34324618的博客
05-26 1324
小菜今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar，使用方式很简单，小菜感觉效果比原生的 Android 要好一些。何为 BottomNavigationBar ?BottomNavigationBar 为底部导航栏控件，可以包含文字标签和图标等基本信息，通常在三到五个之间；据了解，iOS 的规范底部导航栏最多可设置五个，所以大部分应用均在五...
Flutter TabBar下方白条隐藏
qianxiamuxin的博客
11-05 2900
我们在设置AppBar的时候，常常用到TabBar做嵌套导航，但是由于tabbar自带下划线，会使得界面的设计不美观这是由于我们在 GetMaterialApp里面的theme主题管理中开启了，这会导致TabBar组件样式出现下划线。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shunsix

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值