解决Flutter报错boxconstraints has non-normalized height/width constraints

简介: 解决Flutter报错boxconstraints has non-normalized height/width constraints

出错场景

如果我们在使用约束时没有正确的传入宽高,比如以下代码

ConstrainedBox(
  /// 设置最小高度为150, 最大高度为100.
  constraints: BoxConstraints(minHeight: 150,maxHeight: 100),
  child: Container(
    color: Colors.red,
    child: Center(
      child: Text('呵呵'),
    ),
  ),
),

运行会报以下错误

======== Exception caught by widgets library =======================================================
The following assertion was thrown building AsyncTaskPage(dirty, dependencies: [MediaQuery, _ViewScope], state: _AsyncTaskPageState#e16b3):
BoxConstraints has non-normalized height constraints.

The offending constraints were: BoxConstraints(0.0<=w<=Infinity, 150.0<=h<=100.0; NOT NORMALIZED)
The relevant error-causing widget was: 
  AsyncTaskPage AsyncTaskPage:file:///Users/ado/work/flutter/flutter_app/lib/main.dart:115:30
When the exception was thrown, this was the stack: 
#0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:520:9)
#1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:563:9)
#2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:578:6)
#3      new ConstrainedBox (package:flutter/src/widgets/basic.dart:2511:27)
#4      _AsyncTaskPageState._centerScrollEffect (package:flutter_app/async_task_page.dart:74:11)
#5      _AsyncTaskPageState.build (package:flutter_app/async_task_page.dart:48:13)
#6      StatefulElement.build (package:flutter/src/widgets/framework.dart:5198:27)
#7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5086:15)
#8      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5251:11)
#9      Element.rebuild (package:flutter/src/widgets/framework.dart:4805:7)
#10     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2780:19)
#11     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:903:21)
#12     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:358:5)
#13     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1284:15)
#14     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1214:9)
#15     SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:939:7)
#19     _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:189:12)
(elided 3 frames from class _Timer and dart:async-patch)
====================================================================================================

源码分析

进入BoxConstraintsdebugAssertIsValid方法查看(package:flutter/src/rendering/box.dart:520:9)

      if (minWidth < 0.0 && minHeight < 0.0) {
        throwError(ErrorSummary('BoxConstraints has both a negative minimum width and a negative minimum height.'));
      }
      if (minWidth < 0.0) {
        throwError(ErrorSummary('BoxConstraints has a negative minimum width.'));
      }
      if (minHeight < 0.0) {
        throwError(ErrorSummary('BoxConstraints has a negative minimum height.'));
      }
      if (maxWidth < minWidth && maxHeight < minHeight) {
        throwError(ErrorSummary('BoxConstraints has both width and height constraints non-normalized.'));
      }
      if (maxWidth < minWidth) {
        throwError(ErrorSummary('BoxConstraints has non-normalized width constraints.'));
      }
      if (maxHeight < minHeight) {
        throwError(ErrorSummary('BoxConstraints has non-normalized height constraints.'));
      }
      if (isAppliedConstraint) {
        if (minWidth.isInfinite && minHeight.isInfinite) {
          throwError(ErrorSummary('BoxConstraints forces an infinite width and infinite height.'));
        }
        if (minWidth.isInfinite) {
          throwError(ErrorSummary('BoxConstraints forces an infinite width.'));
        }
        if (minHeight.isInfinite) {
          throwError(ErrorSummary('BoxConstraints forces an infinite height.'));
        }
      }

通过代码得知,只要出现以上最小宽高为负数、最小宽高大于最大宽高、最小宽高是无穷大就会报错,所以我们只需要在使用约束的时候注意设置正确的minWidth、maxWidth、minHeight、maxHeight即可。

正确代码

ConstrainedBox(
  /// 设置最小高度为100, 最大高度为150.
  constraints: BoxConstraints(minHeight: 100,maxHeight: 150),
  child: Container(
    color: Colors.red,
    child: Center(
      child: Text('呵呵'),
    ),
  ),
),
相关文章
|
2月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
25 1
|
7月前
|
缓存 Dart 开发工具
解决Flutter报错The method ‘File.create‘ has fewer named arguments than those of overridden method
解决Flutter报错The method ‘File.create‘ has fewer named arguments than those of overridden method
95 3
|
4月前
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
45 2
|
7月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
70 4
|
7月前
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
281 3
|
7月前
|
Dart
Flutter使用Scaffold报错。
Flutter使用Scaffold报错。
90 3
|
7月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
272 2
|
7月前
|
iOS开发
解决Flutter运行IOS报错:Podfile is out of date
解决Flutter运行IOS报错:Podfile is out of date
105 1
|
7月前
|
Android开发
解决Android、Flutter编译时Gradle报错:javax.net.ssl.SSLException: Connection reset
解决Android、Flutter编译时Gradle报错:javax.net.ssl.SSLException: Connection reset
788 0
|
API Android开发
Flutter导入第三方包后报错The number of method references in a .dex file cannot exceed 64K
Flutter导入第三方包后报错The number of method references in a .dex file cannot exceed 64K

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    32
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    34
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    32
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    155
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    101
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    61
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    175
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    55
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    82
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    179