flutter ListTile标题、尾部未居中

kiz8lqtg 于 2022-12-05 发布在 Flutter

关注(0)|答案(7)|浏览(244)

这看起来很简单，但我不明白。我有一个ListTile，它有一个前置复选框、一个标题和一个尾随图标。在上次Flutter更新后，由于某种原因，复选框和图标不再居中。我想让它们垂直居中。我试着添加居中（）、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),
      ),

调试模式：

flutter

来源：https://stackoverflow.com/questions/55168962/listtile-heading-trailing-are-not-centered

7条答案

按热度按时间

d5vmydt91#

在前导行内使用列，并将MainAxisAlignment设置为居中

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

赞(0）回复(0）举报 2022-12-05

6ojccjat2#

只需在容器内添加高度为两倍.infinity的图标。

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

赞(0）回复(0）举报 2022-12-05

wecizke33#

我通过制作自己的ListTile解决了这个问题。它基本上只是一行填充。工作很好，比ListTile更可定制。

赞(0）回复(0）举报 2022-12-05

j5fpnvbx4#

下面这一招对我管用，

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

赞(0）回复(0）举报 2022-12-05

b5buobof5#

如果您选择DIY，这里有一个简单ListTile的示例实现：

class CustomListTile extends StatelessWidget {
  const CustomListTile(
      {Key? key,
      required this.title,
      this.content,
      this.leading,
      this.trailing,
      this.onTap})
      : super(key: key);
  final Widget title;
  final Widget? content;
  final Widget? leading;
  final Widget? trailing;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            leading ?? const SizedBox(),
            const SizedBox(width: 20),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  title,
                  const SizedBox(height: 4),
                  content ?? const SizedBox(),
                ],
              ),
            ),
            trailing ?? const SizedBox(),
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-05

ycggw6v26#

你可以这样做，没有更好的办法了

ListTile(
    minLeadingWidth: 0.0,
    minVerticalPadding: 0.0,
    contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    title: Text('Bla bla'),
    leading: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.close)
        ],
     ),
)

赞(0）回复(0）举报 2022-12-05

ahy6op9u7#

这对我有用！

ListTile(
  leading: const SizedBox(
       height: double.infinity,
       child: Icon(Icons.location_on_rounded)),
  tileColor: DesignColor.grey,
  title: "Title 1".textMediumRegular(),
  subtitle: "Title 2".textSmall(),
  trailing: const SizedBox(
       height: double.infinity,
       child: Icon(Icons.edit_rounded)),
)

输出量：

赞(0）回复(0）举报 2022-12-05

我来回答

flutter ListTile标题、尾部未居中

7条答案

相关问题

热门标签

最新问答