Flutter 中的错误：断言失败：第 588 行 pos 12：'size.isFinite'：不是 true。在 GridTileBar 中

Question

这是我向社区提出的第一个问题。我正在学习 Flutter，并试图重新创建 Dribbble 上看到的设计。当我尝试向 GridTileBar 添加页脚时遇到这两个错误：

1. 在 PerformLayout() 期间抛出以下断言：'package:flutter/src/rendering/stack.dart': 断言失败: line 588 pos 12: 'size.isFinite': is not true。

2. RenderBox 未布局：RenderStack#fd7b9 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': 断言失败：第 1940 行 pos 12: 'hasSize'

相关的导致错误的小部件是 ClipRRect lib\main_body.dart:73

我已将 GridTile 包裹在 ClipRRect 中，并且 GridTile 的子级是一个图像，请参阅添加页脚之前和之后的 2 个屏幕截图。

之前 之后

这是我的代码：

class UIUXCard extends StatelessWidget {

@override
Widget build(BuildContext context) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(15),
    child: GridTile(
      child: Image.asset(
        'images/ui.jpg',
        fit: BoxFit.cover,
      ),
      footer: GridTileBar(
      backgroundColor: Colors.black54,
      title: Text('UI/UX Design'),
    ),
  ),
);

} }

Answer 1

我能够复制这个问题。

在我创建的示例代码中：

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            UIUXCard(),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: GridTile(
        child: Image.asset(
          'images/ui.jpeg',
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Text('UI/UX Design'),
        ),
      ),
    );
  }
}

这会抛出错误：

The following assertion was thrown during performLayout():
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

和

RenderBox was not laid out: RenderStack#f487f relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

正如所观察到的，它UIUXCard()位于一个无界小部件（列小部件）中。它需要包装在有界的小部件中并为其提供大小。在下面的示例中，我添加了一个 Container 来解决该问题。

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Wrap in a Container
            Container(
              width: 100.0,
              height: 100.0,
              child: UIUXCard(),
            ),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: GridTile(
        child: Image.asset(
          'images/ui.jpeg',
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Text('UI/UX Design'),
        ),
      ),
    );
  }
} 

或者尝试将其包装GridTile在容器中：

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Wrap in a Container
            UIUXCard(),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: Container(
        width: 100.0,
        height: 100.0,
        child: GridTile(
          child: Image.asset(
            'images/ui.jpeg',
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black54,
            title: Text('UI/UX Design'),
          ),
        ),
      ),
    );
  }
}

尝试查看有关“ Flutter 中的布局”的文档。对于此类案例来说，这将是一个很好的参考。

如果不是这种情况，您能否提供代码的其他部分？或者你试图调用班级的部分UIUXCard？