时间戳

首页 > 解决方案 > 如何在页面的中途启动 ListTile？

dart - 如何在页面的中途启动 ListTile？

问题描述

我的页面上有一个 ListTile 卡片，但我的应用程序中没有 AppBar，因此 ListTile 从页面顶部开始。如果我添加填充，它会将其添加到 ListView 中的每张卡片中，然后虽然我可以将卡片放置在页面的下方，但它们之间会出现巨大的间隙。有什么方法可以保持卡片之间的小间隙，但在 ListView 开始之前在顶部有一个更大的间隙？作为参考，我粘贴了下面的代码。（本质上它是一个 Todo 列表类型的应用程序，所以有一个从底部弹出的 FormField，你输入一个它出现在 ListView 卡片上的任务。）

Widget _buildTodoList() {
  DateTime now = DateTime.now();
  String formattedDate = DateFormat('EEE d MMM').format(now);
  return ListView.builder(
    itemBuilder: (context, index) {
      if(index < _todoItems.length) {
        return ListTile(
          onLongPress: () => _promptRemoveTodoItem(index),
          title: Card(
              elevation: 1.0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(23.0),
              ),
                semanticContainer: true,
                clipBehavior: Clip.antiAlias, 
                child: Column(
                  children: <Widget>[
                  Container(
                    child: Stack(
                      children: <Widget>[
                      Container(
                      margin: EdgeInsets.fromLTRB(23.5, 27.5, 0.0, 0.0),
                      child: Text("?", 
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                                color: Colors.black54,
                              ),
                      ),
          ),
          Container(
                      margin: EdgeInsets.fromLTRB(23.5, 58.0, 0.0, 0.0),
                      child: Text("${_todoItems[index]}", 
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 12,
                                color: Colors.black38,
                              ),
                      ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                      child: Container(
                      margin: EdgeInsets.fromLTRB(0.0, 6.5, 20.0, 0.0),
                      child: Text(formattedDate, 
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 11,
                                color: Colors.deepOrange[700],
                              ),
                      ),
                      ),
                      ),
          ],
        ),
        height: 100,
        width: 380,
        ),
        ],
        ),
        ),
        );
      }
    },
  );
}

标签： dartflutter

解决方案

我不确定我是否正确理解您的问题，但如果是 - 我看到了几个解决方案：

您可以将填充添加到整体ListView

Padding(padding: EdgeInsets.only(top: 200.0), child: ListView.builder(...),)

您可以在列表的第一位添加空项目：

ListView.builder(itemBuilder: (context, index) {
  if (index == 0) {
    return SizedBox(height: 200.0,);
  } else {
    // todo return your ListTile
  }
},
itemCount: _todoItems.length + 1,)

推荐阅读