dart - 在 Flutter 中向卡片添加新列

Question

如何在 flutter 中向卡片添加新列？

目前，我有 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 列，这样我就可以在这张卡片的中间添加一张图片。

Current output Expected output

Answer 1

根据您的屏幕截图，这是解决方案。您可以根据需要进行修改。

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),
        ],
      ),
    ),
  );
}

输出: