Question

所以这似乎很基本，但我无法弄清楚。我有一个ListTile，它有一个前导复选框，一个标题和一个尾随图标。在上一次Flutter更新中，由于某种原因，复选框和图标不再居中。我希望它们垂直居中。我尝试以各种方式将Center（），Align（），Expanded（）和Flexible（）添加到复选框，但它只是将标题从屏幕上推开了，或者什么也不做。

有什么提示吗？任何帮助表示赞赏。

ListTile(
        leading: Checkbox(
          value: item.checked,
          onChanged: (bool newValue) {
            setState(() {
              item.checked = newValue;
            });
            firestoreUtil.updateList(user, taskList);
          },
          activeColor: Theme.of(context).primaryColor,
        ),
        title: InkWell(
            onTap: () {
              editTask(item);
            },
            child: Text(
              item.task,
              style: TextStyle(fontSize: 18),
            )),
        trailing: ReorderableListener(
          child: Container(
              padding: EdgeInsets.only(right: 16),
              child: Icon(Icons.drag_handle)),
        ),
        contentPadding: EdgeInsets.all(8),
      ),

调试模式：

Answer 1

只需在容器内添加具有double.infinity高度的图标。

leading: Container(
                height: double.infinity,
                child: Icon(Icons.star),
              ),

Answer 2

使用填充控件将填充赋予潜在客户和跟踪控件，

并设置 Padding Widget top 属性，如“ padding：EdgeInsets.only（top：value）”，“ value ”顶部根据您的“ ListTile”小部件高度/ 2 指定ListTile的中心。

有关ListTile小部件的高度和宽度，您可以参考下面的链接： -https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
-https://pub.dartlang.org/packages/rect_getter#-readme-tab-

Answer 3

我通过制作自己的ListTile解决了这一问题。基本上只是一行填充。比ListTile更好用，并且可自定义。

Answer 4

在行首内使用Column，并将MainAxisAlignment设置为居中

  leading: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Icon(leadingnIcon, color: Colors.blueGrey,),
    ],
   ),

Answer 5

以下技巧对我有用，

leading: Container(
            constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
            height: double.infinity,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text( 
              ....

ListTile标题，尾部未居中

5 个答案: