为什么我的 Flutter 应用程序在 ListView 中使用自定义小部件时会崩溃？

Question

我正在 Flutter 中创建一个自定义小部件来显示包含一些动态内容的卡片。它本身工作得很好，但是当我将它添加到 ListView 中时，应用程序崩溃并出现“RenderBox 未布局”错误。这是我的代码的简化版本：

class MyCustomWidget extends StatelessWidget {

  final String title;

  

  MyCustomWidget({required this.title});

  

  @override

  Widget build(BuildContext context) {

    return Container(

      margin: EdgeInsets.all(10),

      padding: EdgeInsets.all(20),

      child: Text(title),

    );

  }

}



class MyListScreen extends StatelessWidget {

  final List<String> items = ["Item 1", "Item 2", "Item 3"];



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("My List")),

      body: ListView.builder(

        itemCount: items.length,

        itemBuilder: (context, index) {

          return MyCustomWidget(title: items[index]);

        },

      ),

    );

  }

}

错误消息：RenderBox 未布局：RenderFlex#...需要明确的大小。

我尝试将小部件包装在不同的容器中并调整对齐属性，但似乎没有任何办法可以解决它。我该如何解决这个问题？”

这种方法经常受到关注，因为它包含清晰的代码、详细的错误消息以及您已经尝试过的努力。关键是要具体、简洁，以便专家能够快速识别问题。如果您想要更多想法，请告诉我！

Answer 1

我已经像这样尝试了你的代码，效果很好：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyListScreen());
  }
}

class MyCustomWidget extends StatelessWidget {
  final String title;

  MyCustomWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(20),
      child: Text(title),
    );
  }
}

class MyListScreen extends StatelessWidget {
  final List<String> items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("My List")),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return MyCustomWidget(title: items[index]);
        },
      ),
    );
  }
}

您是否尝试在某些灵活小部件的列中使用您的列表？如果是这样，您需要定义它们的大小，例如包装在 SizedBox 或 Expanded 小部件中。

ps：我已经在 https://dartpad.dev

上测试了这段代码