Flutter中ListView中List项的显示属性

Question

我正在创建一个小型 Flutter 程序来了解它，但无法使用 ListView Builder 显示“任务”对象（存在于列表中）的“描述”属性。我已经用普通文本尝试过了，它按照我想要的方式显示，这让我相信布局是正确的；这只是我无法访问“Task.description”，因为它返回“无法使用静态访问访问实例成员“描述”。”只是为了澄清一下，包含任务的列表和 ListView Builder 位于不同的文件中，尽管我不明白为什么这会成为问题。

这是包含任务对象示例的列表（还有 3 个）：

final List<Task> taskList = [
  Task(
    title: 'Clean Spillage On Aisle 4',
    description:
        'Clear up using mop & cleaning solution found in store cupboard B',
    creator: 'John Smith',
    status: CompletionStatus.notStarted,
    completeBy: "08:30 am",
  ),
];

这是主要的 ListView Builder 方法：

import 'package:task_management/data/tasks.dart';

class TaskCard extends StatelessWidget {
  static String desc = Task.description;
  final Task task;
  const TaskCard(this.task, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.fromLTRB(8, 8, 8, 8),
          height: 290,
          width: double.maxFinite,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            shadowColor: Colors.black,
            elevation: 15,
            child: ClipPath(
              clipper: ShapeBorderClipper(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
//Start of relevant code block
              child: ListView.builder(
                itemCount: taskList.length,
                itemBuilder: ((context, index) {
                  return ListTile(
                    leading: CircleAvatar(
                      child: Text(Task.description),
                    ),
                    title: Text(Task.description),
                  );
                }),
              ),
//End of relevant code block
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我相信我明白你想表达的意思。您想要从对象中提取值并将其显示在列表视图构建器中。我为你写了一个最小的代码。只需将其复制并粘贴到

main.dart

文件中并尝试和测试即可。认可我并随时在评论部分提问。

源代码：

import "package:flutter/material.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Task> taskList = <Task>[
    Task(title: "It's title 01", subtitle: "It's subtitle 01"),
    Task(title: "It's title 02", subtitle: "It's subtitle 02"),
    Task(title: "It's title 03", subtitle: "It's subtitle 03"),
    Task(title: "It's title 04", subtitle: "It's subtitle 04"),
    Task(title: "It's title 05", subtitle: "It's subtitle 05"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount: taskList.length,
          itemBuilder: (BuildContext context, int index) {
            // Important 👇🏻
            final Task task = taskList[index];
            // Important 👆🏻
            return ListTile(
              title: Text("Title: ${task.title}"),
              subtitle: Text("Subtitle: ${task.subtitle}"),
            );
          },
        ),
      ),
    );
  }
}

class Task {
  Task({required this.title, required this.subtitle});

  final String title;
  final String subtitle;
}