带有矩形图像和文本的 ListTile

Question

Flutter 新手。我想设计如下屏幕。我正在使用 ListTile 但它不允许我添加多个文本。帮助将不胜感激。

@override
  Widget build(BuildContext context) {
   return Scaffold(
    body: Center(
          child: new ListView.builder(
              itemCount: _ProductsList.length,
              itemBuilder: (BuildContext ctxt, int i) {
                final img = _ProductsList[i].image_urls;
                return new Card(
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          leading: ConstrainedBox(
                            constraints: BoxConstraints(
                              minWidth: 44,
                              minHeight: 44,
                              maxWidth: 64,
                              maxHeight: 64,
                            ),
                            child: Image.network('$url$img'),
                          ),
                           title: Text(_ProductsList[i].title, style: kListTileShopTitleText,),
                          onTap: () {        
                          },
                        ),
                      ],
                    )
                );
              })
      )
    );
 }

Answer 1

您可以使用富文本来实现此目的，但代码会变得混乱，listtile 提供的功能有限，您应该像这样使用列和行而不是列表：

Column(
Children:[
Row(
Children:[
Card/Container(
//your rectangle image wether using container or card
),
Column(
Children:[
Text(""$itemName),
Row(
Children:[
Icon(
//Rating Icon
),
Text(''$averagerating),
Text(''$totalratings),
]
),
Row(
Children:[
Icon(
//Currency Icon
),
Text(''$Discountedprice),
Text(''$Originalprice),
]
),
]
),]),]),

Answer 2

使用列表、标题和副标题的属性。在此内部，您可以将任何小部件用作列，以便放置更多文本。另一种解决方案是构建您自己的小部件来替换 listile。

带有矩形图像和文本的 ListTile

ListTile with rectangle image and text

flutter

flutter-card

listtile