如何在卡中添加新列到卡中?
目前,我有2列,无法弄清楚如何在这些列之间添加第三列,因为它们位于左侧和右侧。当我尝试添加“新列”时,它只在第一列下创建一个新的文本行。
到目前为止这是我的代码:
Widget _buildListItem(BuildContext context, Record record) {
return Card(
key: ValueKey(record.activityName),
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
title: Text(
record.activityName,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 23),
),
subtitle: Row(
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(
text: "Activations: "+record.activations+
"\n"+record.dateCompleted,
style: TextStyle(color: Colors.white),
),
maxLines: 2,
softWrap: true,
)
],
)
)
],
),
trailing: Container(
child: Hero(
tag: "avatar_" + record.activityName,
child: CircleAvatar(
radius: 32,
backgroundImage: NetworkImage(record.icon),
backgroundColor: Colors.white,
)
)
),
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => new DetailPage(record: record)));
}
),
)
);
}
我想要3列,这样我就可以在这张卡片的中间添加一个图像。
根据您的屏幕截图,这是解决方案。您可以根据需要进行修改。
Widget _buildListItem(BuildContext context) {
return Card(
margin: EdgeInsets.all(12),
elevation: 4,
color: Color.fromRGBO(64, 75, 96, .9),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Jumping", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
SizedBox(height: 4),
Text("Activations 9", style: TextStyle(color: Colors.white70)),
Text("03-08-19", style: TextStyle(color: Colors.white70)),
],
),
Spacer(),
CircleAvatar(backgroundColor: Colors.white),
],
),
),
);
}
输出: