如何使用 PageView 构建器查看基于我的列表的项目?
How to use PageView builder to view items based on my List?
我在我的 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
列表以及我如何为我的卡片小部件获取这些值。
- 像这样将所需参数作为成员添加到您的
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"] ?? ''),
}
替换这个
'''
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,
),
],
),
),
),
);
}
}
'''
我在我的 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
列表以及我如何为我的卡片小部件获取这些值。
- 像这样将所需参数作为成员添加到您的
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"] ?? ''),
}
替换这个 '''
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,
),
],
),
),
),
);
}
}
'''