垂直分隔线未扩展到Flutter List磁贴中的全高

时间:2019-06-23 06:59:46

标签: android listview flutter

我想像下面的图片一样重新创建列表UI:

enter image description here

如您所见,“列表”磁贴中的“前导图标”在其右侧有一个垂直分隔线,并且与底部分隔线相交,但是我无法获得那种外观,并且只能重新创建该外观用户界面。

enter image description here

这是我正在使用的代码:

contentBuilder: (BuildContext context) {
      return Container(
        child: FutureBuilder(
          future: _getFoodDetails(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            print(snapshot.data);
            if (snapshot.data == null) {
              return Container(child: Center(child: Text("Loading...")));
            } else {
              return Expanded(
                child: ListView.separated(
                  itemCount: snapshot.data.length,
                  separatorBuilder: (context, index) {
                    return Divider();
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      dense: false,
                      leading: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(Icons.phone, color: Colors.blue),
                          VerticalDivider(),
                        ],
                      ),
                      title: Text(snapshot.data[index].foodTitle),
                      subtitle: Text(snapshot.data[index].foodQuantity),
                      onTap: () {},
                      trailing: Icon(Icons.keyboard_arrow_right,
                          color: Colors.yellow, size: 30.0),
                    );
                  },
                ),
              );
            }
          },
        ),
      );
    }

请建议我如何在分隔线彼此相交的情况下实现所需的UI外观,并删除即时获取的填充。

0 个答案:

没有答案