如何在抖动中创建像这样的图像的列表按钮

时间:2019-07-12 07:11:00

标签: flutter flutter-layout

我对于使用最适合此显示的小部件感到困惑 enter image description here

2 个答案:

答案 0 :(得分:4)

您可以为每个元素使用ListTile,并在它们之间使用Divider

ListView.builder(
  itemBuilder: (context, i) {
    if (i.isOdd)
      return Divider();
    final index = i ~/ 2;
    return buildRow(index);
  },
  itemCount: [your_items].length * 2,
  controller: controller,
);

Widget buildRow(int index) {
  return ListTile(
    leading: /* your icon */,
    title: /* title */,
    subtitle: /* subtitle */,
    trailing: /* right arrow */,
  )
}

答案 1 :(得分:1)

您可以使用ListView小部件,这是最好的选择。像这样

Scaffold(
        appBar: AppBar(title: Text('Something'),),
        body: ListView(
          children: <Widget>[
            buildListTile(Icons.phone, 'Telepon', "Kode verfikasi akan dikirim melalui telepon", Icons.arrow_forward_ios),
Divider(), // <-- this is added
            buildListTile(Icons.chat_bubble, 'SMS', "Lorem ipsum dolor sit amet, consectetur", Icons.arrow_forward_ios),
Divider(), // <-- this is added
          ],
        ),
      )
    );
  }

  ListTile buildListTile(leadingIcon, titleText, subtitleText, trailingIcon) {
    return ListTile(
            leading: Icon(leadingIcon),
            title: Text(titleText),
            subtitle: Text(subtitleText),
            trailing: Icon(trailingIcon),
          );
  }