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，我有同樣的問題，我刪除了小部件上的定位並完成！