flutter内容超出屏幕Y轴高度边界报错

最新推荐文章于 2024-05-30 08:47:09 发布
最新推荐文章于 2024-05-30 08:47:09 发布
阅读量5k 收藏 2
点赞数 1
分类专栏： Flutter/Dart/React Nactive移动端 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40282732/article/details/104061306
版权

编写flutter代码的时候，如果超出手机屏幕高度的话是会出错的，需要使用SingleChildScrollView来包裹

SingleChildScrollView和container用发一样， 直接包在外层就好了，里面是child’
它可以在主题内容超出Y轴的时候自动生成滚动条，类似overflow：auto
类似如下用法

return SingleChildScrollView(
	child: Container(
		child .....
	)
)
ldz_miantiao
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【Flutter】Flutter如何解决布局越界
Code Metaverse
06-14 1738
三种方法
flutter 文字过长超出范围,Flutter-列内扩展小部件内的文本溢出
weixin_36474829的博客
02-06 471
What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget ha...
Flutter 笔记 | Flutter 可滚动组件
川峰的博客
05-26 4168
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
flutter中解决布局溢出
最新发布
wgefcelgu的专栏
05-30 178
如果Column中的内容是可滚动的，你可以将整个Column包裹在SingleChildScrollView中。这样，当内容超出屏幕范围时，用户可以滚动查看剩余的内。
flutter SingleChildScrollView还底部溢出
龚礼鹏的博客
10-18 2483
如上所示包裹滑动还会出现底部溢出，解决方法是需要包裹一层，限制其高度，不然不知道高度会溢出，如下所示：
Flutter报A RenderFlex overflowed错误（宽高度溢出）或者Flutter Widget不显示的解决办法（Expanded、Flexible）
热门推荐
喻志强的博客
04-22 2万+
我们在用Flutter写ui的时候，经常会遇见写完Widget后不显示， 例如如下代码： 代码很简单，实际上就是一个行控件里面放了一个Text和一个ListView。 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { ...
flutter： listview在SingleChildScrollView中无法滚动
yyyyyyui68的博客
11-09 1132
因为listview 和SingleChildScrollView都有scroll，需停止listview的滚动，在listview中加入。
Flutter旋转屏幕,Flutter旋转屏幕
09-27
在Flutter框架中，屏幕旋转是移动应用开发中的一个重要特性，允许用户根据个人偏好或设备方向改变应用程序的布局。本文将深入探讨如何在Flutter中处理屏幕旋转，并提供相关的实践技巧。 一、屏幕方向感知 Flutter...
Flutter 控制屏幕旋转的实现
01-21
2，强制屏幕横屏，不随着屏幕去调整 第一种方式这里就不做说明了。代码做适配就可以。 下面说一下第二种实现方式 Flutter 自带方式 flutter 为我们提供了方法来控制系统的横竖屏显示 SystemChrome....
flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息
10-26
flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息
Flutter中获取屏幕及Widget的宽高示例代码
08-26
本文将详细讲解如何在Flutter中正确地获取屏幕和Widget的宽度与高度。 首先，我们来了解一下`MediaQuery`，它是Flutter中用于获取设备相关信息的类，包括屏幕尺寸、方向等。通常，我们使用`MediaQuery.of(context)....
listview内容超出屏幕高度，自动显示回到listview顶部的按钮
07-13
listview内容超出屏幕高度，自动显示回到listview顶部的按钮，点击按钮自动返回到listview顶部，代码附有注释，简单易懂
flutter 屏幕尺寸适配和字体大小适配的实现
08-25
Flutter 屏幕尺寸适配和字体大小适配的实现 Flutter 屏幕尺寸适配是移动应用程序开发中非常重要的一步，屏幕尺寸适配可以使应用程序在不同的移动设备上显示正确的布局，而字体大小适配可以使文字大小在不同的设备...
flutter 溢出七种布局方案
17 的博客
01-19 1392
让大家了解一下，哪些组件可以溢出，就这样的能力，等遇到问题的时候，会第一时间想起来。
flutter中的text超出屏幕解决方法
weixin_42354735的博客
11-03 1万+
使用横向布局row 并且在里面添加了一个图标和一行文字，但是总是会超出布局，即使设置了overflow再调试时也会出现如下的情况 Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ ...
Flutter RefreshIndicator高度不够时不能下拉刷新
weixin_43900952的博客
06-25 1161
当列表内数据过少时listview某些嵌套情况下可能不会滚动，数据多时，超出一个屏幕的高度时，不会出现问题。 RefreshIndicator是根据下拉偏移量触发onRefresh操作，不能滚动自然不能下拉刷新。 解决方案： 在listview的physice属性赋值new AlwaysScrollableScrollPhysics()，保持listview任何情况都能滚动，问题解决。 ...
Flutter解决控件文件过长超出屏幕范围 以及 设置overflow后省略文本过多问题
EchoLei的博客
12-22 3099
修改前的代码： 设备截图(右侧爆格显示警告)： ---------------------------------------------------------------------------------------------- 修改后的代码： 修改后的设备截图： 总结： ①在Text内部添加 overflow: TextOverflow.ellipsis， ②在Text外部包含一层 Expanded(child: ) 。 PS：如果只在Text...
Flutter 滚动布局的几种常见效果处理
Mr_Tony的专栏
01-28 4856
文章目录一、滚动布局嵌套Column布局二、强制子控件充满屏幕 一、滚动布局嵌套Column布局 有这么一种效果，编写的Column列表布局或者其它控件布局，如果超过屏幕的话需要能够进行上下滚动，或者如果弹出输入框的时候屏幕不会出现控件超出屏幕的问题。在这里主要是使用SingleChildScrollView进行解决。 效果如下: 代码如下: class ScrollColumn extends StatelessWidget { @override Widget build(BuildConte
flutter 设置text高度超出后 不要报错，前提 ：不能设置最大行数，
05-27
要在Flutter中设置`Text`组件的高度超出后不报错，可以使用`Expanded`和`LayoutBuilder`组件来实现。以下是基本步骤： 1. 使用`Expanded`组件包裹`Text`组件，以便`Text`组件可以自动扩展高度。 ```dart Expanded( child: Text( '需要显示的文本', style: TextStyle(fontSize: 16), // 设置文本字体大小 textAlign: TextAlign.center, // 设置文本对齐方式 strutStyle: StrutStyle.disabled, // 禁用strut softWrap: true, // 允许文本自动换行 textScaleFactor: 1.0, // 文本缩放因子 textDirection: TextDirection.ltr, // 文本方向 locale: Locale('zh'), // 本地化语言 overflowReplacement: Text('文本溢出'), // 整个文本溢出时的替换组件 textWidthBasis: TextWidthBasis.longestLine, // 文本宽度基准 textHeightBehavior: TextHeightBehavior( // 文本高度行为 applyHeightToFirstAscent: false, applyHeightToLastDescent: false, ), ), ); ``` 2. 在`Text`组件外层包裹`LayoutBuilder`组件，以便获取`Text`组件的实际高度。 ```dart LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return Container( child: Expanded( child: Text( '需要显示的文本', style: TextStyle(fontSize: 16), // 设置文本字体大小 textAlign: TextAlign.center, // 设置文本对齐方式 strutStyle: StrutStyle.disabled, // 禁用strut softWrap: true, // 允许文本自动换行 textScaleFactor: 1.0, // 文本缩放因子 textDirection: TextDirection.ltr, // 文本方向 locale: Locale('zh'), // 本地化语言 overflowReplacement: Text('文本溢出'), // 整个文本溢出时的替换组件 textWidthBasis: TextWidthBasis.longestLine, // 文本宽度基准 textHeightBehavior: TextHeightBehavior( // 文本高度行为 applyHeightToFirstAscent: false, applyHeightToLastDescent: false, ), ), ), constraints: BoxConstraints( maxWidth: constraints.maxWidth, // 设置容器的最大宽度 ), ); }, ); ``` 完整代码示例如下： ```dart LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return Container( child: Expanded( child: Text( '需要显示的文本', style: TextStyle(fontSize: 16), // 设置文本字体大小 textAlign: TextAlign.center, // 设置文本对齐方式 strutStyle: StrutStyle.disabled, // 禁用strut softWrap: true, // 允许文本自动换行 textScaleFactor: 1.0, // 文本缩放因子 textDirection: TextDirection.ltr, // 文本方向 locale: Locale('zh'), // 本地化语言 overflowReplacement: Text('文本溢出'), // 整个文本溢出时的替换组件 textWidthBasis: TextWidthBasis.longestLine, // 文本宽度基准 textHeightBehavior: TextHeightBehavior( // 文本高度行为 applyHeightToFirstAscent: false, applyHeightToLastDescent: false, ), ), ), constraints: BoxConstraints( maxWidth: constraints.maxWidth, // 设置容器的最大宽度 ), ); }, ); ``` 需要注意的是，使用`Expanded`组件包裹`Text`组件时，不能设置最大行数，否则会出现溢出警告。因此，要确保`Text`组件的高度不会超过父容器的高度。在上述代码中，我们将父容器的最大宽度设置为`Text`组件的宽度，以便让`Text`组件自动扩展高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ldz_miantiao

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

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

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

打赏作者

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

抵扣说明：

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

余额充值