如何使用 PageView 构建器查看基于我的列表的项目？
eng*_*gPS 4 listview flutter flutter-listview flutter-pageview
我在我的 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 是我为卡片定义的小部件。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 中不同文本小部件的值是静态的。但我希望这些值基于我之前在 中定义的List EventsData_buidCarousel的项目。我不知道该怎么做。我应该在哪里定义这个eventsData列表以及如何为我的卡片小部件获取这些值。
小智 7
替换这个“”
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 extends StatelessWidget { const EventCard({ Key? key, required this.model, }) : super(key: key); 最终模型模型；
@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,
),
],
),
),
),
);
}
}
'''
| 归档时间： |
|
| 查看次数： |
3839 次 |
| 最近记录： |