如何使用 PageView 构建器查看基于我的列表的项目？

Question

我在我的 flutter 应用程序中使用 PageView 构建器来显示可滚动的卡片。为此，我首先创建了一个小部件 _buildCarousel 和小部件 _buildCarouselItem 以使用我为卡片定义的小部件来显示它。我还为事件数据定义了一个地图列表 (eventsData)。

  Widget _buildCarousel(BuildContext context) {
    List<Map> EventsData = [
      {
        "title": "Event ABC",
        "subTitle": "Organised by XYZ",
        "desc": "Event description.",
        "date": "13th Jan, 2022",
        "time": "4:00 pm",
        "lastDate": "11th Jan, 2022"
      },
      {
        "title": "Event MNT",
        "subTitle": "Organised by XYZ",
        "desc": "Event description.",
        "date": "13th Jan, 2022",
        "time": "4:00 pm",
        "lastDate": "11th Jan, 2022"
      },
      {
        "title": "Event WOQ",
        "subTitle": "Organised by STU",
        "desc": "Event description." ,
        "date": "13th Jan, 2022",
        "time": "4:00 pm",
        "lastDate": "11th Jan, 2022"
      }
    ];
    return SizedBox(
      height: 500.0,
      child: PageView.builder(
        itemCount: EventsData.length,
        controller: PageController(viewportFraction: 1),
        itemBuilder: (BuildContext context, int itemIndex) {
          return _buildCarouselItem(context);
        },
      ),
    );
  }

  Widget _buildCarouselItem(BuildContext context) {
    return Padding(
        padding: EdgeInsets.symmetric(horizontal: 4.0), child: EventCard());
  }

这里的 EventCard 是我为 Card 定义的小部件。 EventCard 小部件的代码是：

class EventCard extends StatelessWidget {
  EventCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Card(
      elevation: 10,
      shadowColor: Colors.black,
      margin: EdgeInsets.all(25.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      color: const Color(0xffB7AC44),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              SizedBox(
                height: 10,
              ),
              Text(
                'Title',
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.w900,
                    fontFamily: 'Montserrat'),
              ),
              SizedBox(
                height: 10,
              ),
              Text(
                'Sub Title',
                style: TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Montserrat'),
              ),
              SizedBox(
                height: 10,
              ),
              SizedBox(
                height: 100,
                child: Text(
                  'Description',
                  maxLines: 6,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Spacer(),
              Column(
                children: [
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Date: 12 May, 2022',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Time: 5:00 pm',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Last date to register: 31 May, 2022',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是输出：

如您所见，此处 Card 中不同文本小部件的值是静态的。但我希望这些值基于我之前在 _buidCarousel 中定义的列表 EventsData 的项目。我无法弄清楚我应该怎么做。我应该在哪里定义这个 eventsData 列表以及我如何为我的卡片小部件获取这些值。

Answer 1

像这样将所需参数作为成员添加到您的 EventCard class（这仅显示标题，但您也可以添加其他参数）：

class EventCard extends StatelessWidget {
  final String title;

修改构造函数以初始化这些成员：

  EventCard({required this.title, Key? key}) : super(key: key);

在EventCard中使用这些成员 class:

Text(
  title, //'Title',
  style: TextStyle(...

在itemBuilder中可以直接将对应的值传给EventCard构造函数：

itemBuilder: (BuildContext context, int itemIndex) =>
  Padding(
    padding: EdgeInsets.symmetric(horizontal: 4.0),
    child: EventCard(title: EventsData[itemIndex]["title"] ?? ''),
}

Answer 2

替换这个 '''

List<Map> EventsData = [
  {
    "title": "Event ABC",
    "subTitle": "Organised by XYZ",
    "desc": "Event description.",
    "date": "13th Jan, 2022",
    "time": "4:00 pm",
    "lastDate": "11th Jan, 2022"
  },
  {
    "title": "Event MNT",
    "subTitle": "Organised by XYZ",
    "desc": "Event description.",
    "date": "13th Jan, 2022",
    "time": "4:00 pm",
    "lastDate": "11th Jan, 2022"
  },
  {
    "title": "Event WOQ",
    "subTitle": "Organised by STU",
    "desc": "Event description." ,
    "date": "13th Jan, 2022",
    "time": "4:00 pm",
    "lastDate": "11th Jan, 2022"
  }
];

''' 有了这个 '''

class Model {
  String title;
  String subTitle;
  String desc;
  String date;
  String time;
  String lastDate;
  Model({
    required this.title,
    required this.subTitle,
    required this.desc,
    required this.date,
    required this.time,
    required this.lastDate,
  });
}

Widget _buildCarousel(BuildContext context) {
  List<Model> eventsData = [
    Model(
      title: "Event ABC",
      subTitle: "Organised by XYZ",
      desc: "Event description.",
      date: "13th Jan, 2022",
      time: "4:00 pm",
      lastDate: "11th Jan, 2022",
    ),
    Model(
      title: "Event",
      subTitle: "Organised",
      desc: "Event description.",
      date: "13th Jan, 2022",
      time: "5:00 pm",
      lastDate: "2th Jan, 20203",
    ),
    Model(
      title: "Event WOQ",
      subTitle: "Organised by STU",
      desc: "Event description.",
      date: "13th Jan, 2022",
      time: "4:00 pm",
      lastDate: "11th Jan, 2022",
    ),
  ];

  return SizedBox(
    height: 500.0,
    child: PageView.builder(
      itemCount: eventsData.length,
      controller: PageController(viewportFraction: 1),
      itemBuilder: (BuildContext context, int itemIndex) {
        return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: EventCard(
              model: eventsData[itemIndex],
            ));
      },
    ),
  );
}

'''

并且你的卡片重新保存模型并且这个模型有数据 ''' class EventCard 扩展了 StatelessWidget { 常量事件卡（{ 钥匙？钥匙，需要 this.model, }）：超级（键：键）；最终模型模型；

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 10,
      shadowColor: Colors.black,
      margin: const EdgeInsets.all(25.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      color: const Color(0xffB7AC44),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              Text(
                model.title,
                style: const TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.w900,
                    fontFamily: 'Montserrat'),
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                model.subTitle,
                style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Montserrat'),
              ),
              const SizedBox(
                height: 10,
              ),
              SizedBox(
                height: 100,
                child: Text(
                  model.desc,
                  maxLines: 6,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                      fontSize: 14, fontWeight: FontWeight.w400),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Spacer(),
              Column(
                children: [
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      model.date,
                      style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      model.time,
                      style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      model.lastDate,
                      style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontFamily: 'Montserrat'),
                    ),
                  ),
                ],
              ),
              const SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

'''

如何使用 PageView 构建器查看基于我的列表的项目？

How to use PageView builder to view items based on my List?

flutter

listview

flutter-listview

flutter-pageview