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

将小部件正确放置在卡中

1 个答案: