Question

我正在尝试建立一个由多个组件组成的列表视图。我发现Flutter Listview受限于可以添加到每个项目的内容。也许有一种方法可以执行我想要的操作，但是我不确定该怎么做。

这是我的代码

 ListView.builder(
              shrinkWrap: true,
              itemCount: count,
              itemBuilder: (BuildContext context, int position) {
                return Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundColor: Colors.yellow,
                          child: Icon(Icons.play_arrow),
                        ),

                        title: Text('Social Security',                        
                          style: titleStyle,),

                         subtitle: Text('Weekly | Amex(Debit)',

                        trailing: Text('$45.00')


                        onTap: () {
                          debugPrint("ListTile Tapped");

                        },
                      )
                    ]
                );
              }
            );

在我的代码中，我只能显示6个组件中的3个。我在屏幕的最右侧显示一个图标，一个旁边的文本和超文本以及另一个文本。但是，我缺少低于$ 45.00的子文本，并且我不知道如何在图标和文本顶部显示Pay On：日期。请查看所附图片，以了解我要为列表中的每个项目显示什么。红色矩形代表列表中的一项。有人可以帮我修改我的代码，以将listview作为附件显示吗？

Answer 1

我们可以在title参数内放置完全自定义的小部件：

Widget complexListTile() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text("Pay on: Wed, May 08 2019"),
        Row(
          children: <Widget>[
            CircleAvatar(
              backgroundColor: Colors.yellow,
              child: Icon(Icons.play_arrow),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("Social Security"),
                    Text("Weekly | Debit"),
                  ],
                ),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Text("\$45.00"),
                Text("Not Received"),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Widget complexListView() {
    return ListView.builder(
      shrinkWrap: true,
      itemCount: 10,
      itemBuilder: (BuildContext context, int position) {
        return ListTile(
          title: complexListTile(),
          onTap: () {
            debugPrint("ListTile Tapped");
          },
        );
      },
    );
  }

如何在列表视图中显示多个组件

1 个答案: