将小部件正确放置在卡片内

Question

我正在尝试使用 Card 小部件创建 ListView。

我有 ListView 和 Card，但我不知道如何在 Card 本身内正确放置小部件。这是现在的样子：

我希望收藏夹图标和图像保留其位置，但将文本移动到图像附近，并让“Jean-Paul-Gaultier”文本更靠近“Le Male”并拥有它左对齐。

这是我目前所拥有的：

Widget _myListView(BuildContext context) { 
return ListView.builder(
  itemBuilder: (context, index){
    return Card(

      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.network('${decoded[index]['image']}'),
              ),
            ],
          ),
          SizedBox(width: 8,),
          Column(
            children: <Widget>[
              Text(
                '${decoded[index]['name']}',
                style: TextStyle(
                  color: Colors.black87,
                  fontWeight: FontWeight.bold,
                  fontSize: 14,
                ),
              ),
              Row(
                children: <Widget>[
                  Text(
                    '${decoded[index]['brand']}',
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.favorite_border),
              ),
            ],
          ),
        ],
      ),
    );
  },
);
}

如果没有mainAxisAlignment: MainAxisAlignment.space-between，文本确实更靠近图像，但收藏夹图标会靠近文本，这是我不想要的。

我试图搜索答案，但由于我是 Flutter 新手，我真的不知道正确的关键字，所以我找不到任何东西。

Answer 1

更简单的方法是使用ListTile

  Widget _myListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text("title"),
            subtitle: Text("subtitle"),
            leading: Container(
              width: 48, height: 48,
              child: Placeholder(), //place image here replacing the Placeholder widget
            ),
            trailing: IconButton(
              icon: Icon(Icons.favorite_border),
              onPressed: () {},
            ),
          ),
        );
      },
    );
  }

这给了我们

---

但如果你想要你的代码，那么这里就是

  Widget _myListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Card(
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.all(8.0),
                child: Placeholder(),
                width: 48,
                height: 48,
              ),
              SizedBox(
                width: 8,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'title',
                    style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                    ),
                  ),
                  Text(
                    'subtitle',
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
              Spacer(),
              IconButton(
                icon: Icon(Icons.favorite_border),
                onPressed: () {},
              ),
            ],
          ),
        );
      },
    );
  }

---

编辑

为了减少标题和副标题之间的空间，用下面的代码替换标题

 title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("title",style: Theme.of(context).textTheme.body2,),
                 Text("subtitle",style: Theme.of(context).textTheme.caption,),
              ],
            ),