如何获得容器或卡片中飘动的物品或文本的编号列表?

时间:2020-06-15 17:21:51

标签: flutter flutter-layout

嗨,我正试图扑朔迷离,但无法在卡片或容器中找到编号列表,如下所示:

  1. 第一文本
  2. 第二个文字
  3. 第三文本

而且还有一个从右到左的列表,并尽可能将数字设计成圆形。

1 个答案:

答案 0 :(得分:0)

如果您使用的是ListView.builder,则非常简单。

这里是示例:


List<String> list =["first text", "second text", "third text"];

...
// Now you can render this list with numbering with ListView.builder easily.

ListView.builder
  (
    itemCount: list.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return new Text(index.toString()+ "."+list[index]);
    }
  )

/*
PS: answering this from mobile so couldn't give you the  whole example.
But I hope you got the general idea.
*/

要使其呈圆形显示,则不要像上面的示例那样返回简单的Text小部件,我们需要返回具有两个子级的Row小部件CircleAvatar和Text。

示例:

ListView.builder
  (
    itemCount: list.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return Row( children: [
          CircleAvatar(
              child: Text(index.toString())
               ),
          Text(list[index]),
       );
    }
  )