Question

我正在尝试从食谱https://flutter.io/cookbook/lists/mixed-list/中使用此技术...但是，每个标头的MessageItems为N且不是静态的...我如何对每个标头的N个MessageItems使用此代码示例？

StreamBuilder<QuerySnapshot> buildByDateFb(
    String documentRef, GlobalKey<ScaffoldState> scaffoldState) {
  return StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance
        .collection("schedule")
        .document(documentRef.toLowerCase())
        .collection("by_date")
        .orderBy("day")
        .orderBy("time")
        .snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) return const Text('Loading...');
      final int messageCount = snapshot.data.documents.length;

      List<ListItem> items = new List<ListItem>();
      for(DocumentSnapshot item in snapshot.data.documents) {
        var heading = HeadingItem(item['day']);
        var row = MessageItem(item['className'], item['leadBy'], item['time']);
        items.add(heading);
        items.add(row);
      }

      return StickyList.builder(
        itemCount: messageCount,
        builder: (_, int index) {
          final item = items[index];

          if (item is HeadingItem) {
            return HeaderRow(
                child: _buildRowHeaderContents(item.day.toString())
            );
          } else if (item is MessageItem) {
            return RegularRow(
                child: ListTile(
                  leading: new CircleAvatar(
                    child: new Text(item.time.toString()),
                    radius: 27.0,
                  ),
                  title: new Text(item.className),
                  subtitle: Text(item.leadBy)
                )
            );
          }
        },
      );
    },
  );
}

Answer 1

在这里，您可以使用Flutter创建这样的结构：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<ListItem>.generate(
      1000,
      (i) => i % 6 == 0
          ? HeadingItem("Heading $i")
          : MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

class MyApp extends StatelessWidget {
  final List<ListItem> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          // Let the ListView know how many items it needs to build.
          itemCount: items.length,
          // Provide a builder function. This is where the magic happens.
          // Convert each item into a widget based on the type of item it is.
          itemBuilder: (context, index) {
            final item = items[index];

            return ListTile(
              title: item.buildTitle(context),
              subtitle: item.buildSubtitle(context),
            );
          },
        ),
      ),
    );
  }
}

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);

  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}

/// A ListItem that contains data to display a heading.
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);

  Widget buildTitle(BuildContext context) {
    return Text(
      heading,
      style: Theme.of(context).textTheme.headline5,
    );
  }

  Widget buildSubtitle(BuildContext context) => null;
}

/// A ListItem that contains data to display a message.
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  Widget buildTitle(BuildContext context) => Text(sender);

  Widget buildSubtitle(BuildContext context) => Text(body);
}

参考：Create lists with different types of items

Flutter-创建具有不同类型项目的列表

1 个答案: