Flutter 中的错误：断言失败：第 588 行第 12 行：'size.isFinite': is not true.in GridTileBar

Question

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

1. 在 performLayout() 期间引发了以下断言：'package:flutter/src/rendering/stack.dart'：断言失败：第 588 行 pos 12：'size.isFinite'：不正确。

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

我在 ClipRRect 中包裹了一个 GridTile，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 class 的部分？

Answer 2

检查您的小部件 position，我有同样的问题，我删除了小部件上的定位并完成！