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

本文介绍: Bo xCon s train ts ha s non–normal i zed height constraints.Th e off end in g constraints we re: Bo xCon s train ts(0.0

出错场景

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

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)
====================================================================================================

源码 分析

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

      if (minWidth < 0.0 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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('呵呵'),
    ),
  ),
),