`LinearProgressIndicator` - “BoxConstraints 强制无限宽度。”错误

Question

我对 Flutter 布局的想法是让两个水平居中的垂直 LinearProgressIndicator 小部件相互重叠，周围环绕着 4 个彩色区域。

如果有两个 LinearProgressIndicator 小部件，每个小部件都包裹在一个 Expanded 小部件中，则会出现以下错误。如果没有 LinearProgressIndicator 小部件，则不会发生错误。

关于 BoxConstraints 的错误消息并没有让我找到解决问题的方法。

错误

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.

These invalid constraints were provided to RenderCustomPaint's layout() function by the following function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
The offending constraints were: BoxConstraints(w=Infinity, h=392.7)
The relevant error-causing widget was: 
  LinearProgressIndicator file:///home/dpk/source/Android/demo_app/lib/main.dart:34:20
When the exception was thrown, this was the stack: 
#0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:517:9)
#1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:559:21)
#2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:565:6)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1679:24)
#4      RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
...
The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#a9bbb relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=Infinity, h=392.7)
...  size: MISSING
...  additionalConstraints: BoxConstraints(w=Infinity, 30.0<=h<=Infinity)
  child: RenderCustomPaint#91243 NEEDS-LAYOUT NEEDS-PAINT
    parentData: <none>
    constraints: MISSING
    size: MISSING
RenderObject: RenderConstrainedBox#a9bbb relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=Infinity, h=392.7)
  size: MISSING
  additionalConstraints: BoxConstraints(w=Infinity, 30.0<=h<=Infinity)
  child: RenderCustomPaint#91243 NEEDS-LAYOUT NEEDS-PAINT
    parentData: <none>
    constraints: MISSING
    size: MISSING
====================================================================================================

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: RenderConstrainedBox#a9bbb relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was: 
  LinearProgressIndicator file:///home/dpk/source/Android/demo_app/lib/main.dart:34:20
When the exception was thrown, this was the stack: 
#2      RenderBox.size (package:flutter/src/rendering/box.dart:1930:12)
#3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:117:21)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
#5      RenderRotatedBox.performLayout (package:flutter/src/rendering/rotated_box.dart:88:14)
#6      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
...
The following RenderObject was being processed when the exception was fired: RenderSemanticsAnnotations#ba0b1 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=Infinity, h=392.7)
...  size: MISSING
RenderObject: RenderSemanticsAnnotations#ba0b1 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=Infinity, h=392.7)
  size: MISSING
...  child: RenderConstrainedBox#a9bbb relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(0.0<=w<=Infinity, h=392.7)
...    size: MISSING
...    additionalConstraints: BoxConstraints(w=Infinity, 30.0<=h<=Infinity)
...    child: RenderCustomPaint#91243 NEEDS-LAYOUT NEEDS-PAINT
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
====================================================================================================

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class UpperRow extends StatelessWidget {
  const UpperRow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          color: Colors.red,
        ),
        Expanded(
          child: RotatedBox(
            quarterTurns: 3,
            child: LinearProgressIndicator(
              minHeight: 30,
            ),
          ),
        ),
        Container(
          color: Colors.blue,
        )
      ],
    );
  }
}

class LowerRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
        ),
        Expanded(
          child: RotatedBox(
            quarterTurns: 1,
            child: LinearProgressIndicator(
              minHeight: 30,
            ),
          ),
        ),
        Container(
          color: Colors.red,
        )
      ],
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          UpperRow(),
          LowerRow(),
        ],
      ),
    );
  }
}

Answer 1

在 Expanded 中包装 UpparRow 和 LowerRow 小部件将解决该问题，但每个进度条将占据屏幕高度的一半。要解决此问题，请将 RotedBox 包装在容器中并根据需要提供 alignment 值。看看下面的代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage2(),
    );
  }
}

class MyHomePage2 extends StatelessWidget {
  const MyHomePage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: UpperRow(),
            ),
            Expanded(
              child: LowerRow(),
            ),
          ],
        ),
      ),
    );
  }
}

class UpperRow extends StatelessWidget {
  const UpperRow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          color: Colors.red,
        ),
        Expanded(
            child: Container(
          alignment: Alignment.centerLeft,
          child: RotatedBox(
            quarterTurns: 3,
            child: LinearProgressIndicator(
              minHeight: 30,
            ),
          ),
        )),
        Container(
          color: Colors.blue,
        )
      ],
    );
  }
}

class LowerRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
        ),
        Expanded(
            child: Container(
          alignment: Alignment.centerLeft,
          child: RotatedBox(
            quarterTurns: 1,
            child: LinearProgressIndicator(
              minHeight: 30,
            ),
          ),
        )),
        Container(
          color: Colors.red,
        )
      ],
    );
  }
}