伙计们请帮我,我正在尝试制作这张卡,但我无法创建这张卡。
我正在共享我的代码和输出。 我是扑扑和飞镖语言的新手。
类评论扩展了StatefulWidget { 评论({ 关键 }):super(key:key);
@override
_ReviewState createState() => _ReviewState();
}
class _ReviewState extends State<Review> {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
dragStartBehavior: DragStartBehavior.down,
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
SizedBox(
height: 10,
),
ListTile(
leading: Image.asset("assets/japan.webp"),
title: Column(
children: [
Text("japan"),
Text(
"PR 211",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
),
],
),
),
ListTile(
leading: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("07:40 PM"),
Text(
"Web, Aug 12",
style: TextStyle(fontSize: 13),
),
],
),
title: Column(
children: [
Text("Manila"),
Text(
"MNL, Ninoy Aquino International Airport",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
],
),
),
ListTile(
leading: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("08:40 AM"),
Text(
"thu, Aug 13",
style: TextStyle(fontSize: 13),
),
],
),
title: Column(
children: [
Text("Sydney"),
Text(
"SYD, Kingsford Smith Airport",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Coach",
style: TextStyle(fontSize: 10),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
VerticalDivider(
thickness: 2,
),
Text(
"333",
style: TextStyle(fontSize: 10),
overflow: TextOverflow.ellipsis,
),
Icon(
Icons.tv,
size: 10,
),
Icon(
Icons.wifi,
size: 10,
),
Icon(
Icons.power,
size: 10,
),
Icon(
Icons.local_dining,
size: 10,
),
],
)
],
),
);
},
itemCount: 3,
),
],
),
);
}
}
我正在尝试制作这张卡,这是我的代码和输出。 对我来说这是一个复杂的用户界面,我正在学习颤振和飞镖语言。
答案 0 :(得分:2)
这很简单,您基本上可以只使用一列作为父级,然后可以在顶部和底部添加两行,在顶部添加排期标题,在底部添加详细信息。现在中间是使用步进器小部件创建动态数据的位置。如有疑问,请告诉我。