根据闭包上下文的要求，返回类型“Person”不是“Widget”

Question

我是 Flutter 的新手，我在dartpad.dev上尝试了一些代码片段来解决问题，看看它们是如何工作的。 这是我最近写的一个代码，但我不知道为什么它不起作用？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, Object> x = {};

    x.putIfAbsent('Jack', () => Person(name: "Jack", age: 10));
    x.putIfAbsent('Joe', () => Person(name: "Joe", age: 10));

    return Container(
      child: ListView.builder(
          itemBuilder: (context, index) => Person(
              x.values.toList()[index].name, x.values.toList()[index].age),
          itemCount: x.length),
    );
  }
}

class Person {
  String? name;
  int? age;

  Person({
    this.name,
    this.age,
  });
}

这是我在dartpad.dev上看到的错误：

根据闭包上下文的要求，返回类型“Person”不是“Widget”。

Answer 1

您必须了解基于小部件的颤振工作方式。 小部件是在父子逻辑中放置在树状结构中的组件。

Person 是您创建的一个简单类，其中包含两个字段，但它不是可以在 UI 中使用的 Widget。

您正在构建的 UI 树包含一个想要构建小部件列表的 ListWidget。

因此，构建器期望一个小部件，而不是一个人。 您可以使用 Person 来构建 Widget，或者将您的 Person 类转换为无状态的 Widget。

我建议你从这里开始阅读： https ://docs.flutter.dev/development/ui/widgets-intro

为了使您的代码以最小的调整工作，您可以尝试使用一个文本小部件，您可以在其中传递您的个人详细信息：

return Container(
  child: ListView.builder(
      itemBuilder: (context, index) => Text(
          '${x.values.toList()[index].name}, ${x.values.toList()[index].age}'),
      itemCount: x.length),

相反，如果您将 Person 转换为 Widget，则必须使 person 扩展 StelessWidget，如下所示。 这样，您的 Person 类将有一个构建方法，该方法描述为应该将 Widget 构建到 UI 中。 结果将是相同的。

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        Map<String, Object> x = {};
    
        x.putIfAbsent('Jack', () => Person(name: "Jack", age: 10));
        x.putIfAbsent('Joe', () => Person(name: "Joe", age: 10));
    
        return Container(
          child: ListView.builder(
              itemBuilder: (context, index) => x.values.toList()[index],
              itemCount: x.length),
        );
      }
    }
    
    class Person extends StatelessWidget {
      String? name;
      int? age;
    
      Person({
        this.name,
        this.age,
      });
    
      @override
      Widget build(BuildContext context) {
      return Text('$name, $age');
      }
    }