我在我的顫振應用程式中使用 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 中不同文本小部件的值是靜態的。但我希望這些值基于我之前在_buidCarousel. 我不知道該怎么做。我應該在哪里定義這個eventsData串列以及如何為我的卡片小部件獲取這些值。
uj5u.com熱心網友回復：
替換這個'''
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,
),
],
),
),
),
);
}
}
'''
uj5u.com熱心網友回復：
- 像這樣將所需的引數作為成員添加到您的
EventCard類中（這僅顯示標題，但您也可以添加其他引數）：
class EventCard extends StatelessWidget {
final String title;
- 修改建構式以初始化這些成員：
EventCard({required this.title, Key? key}) : super(key: key);
- 在課堂上使用這些成員
EventCard：
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"] ?? ''),
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431298.html