如何使 listTile 居中领先？

Question

如何居中领先？我有一个带领先的 listTile，当 listTile 由于标题而增长时它不居中（参见图片上的第三个 listTile）。我尝试使用 column 或 sizeBox 和 alignement 但它不起作用。

这是我的代码

class EventTile extends StatelessWidget {
  final EventEntity event;
  final UserEntity user;
  const EventTile({super.key, required this.event, required this.user});
  @override
  Widget build(BuildContext context) {
    return  ListTile(
        contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 2),
        onTap: () {},
        leading: ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              AutoSizeText(
                DateFormat('d').format(event.date!.toDate()).toString(),
              ),
              AutoSizeText(
                DateFormat('MMM').format(event.date!.toDate()).toString(),
                
              ),
            ]),
          ),
        ),
        trailing:FaIcon(FontAwesomeIcons.crown),
        title: Row(
          children: [
            Expanded(
              child: AutoSizeText(
                'Event very long name',
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
              
              ),
            ),
          ],
        ),
        subtitle: Row(
          children: [
            Container(
              margin: const EdgeInsets.only(right: 5),
              child: const FaIcon(
                FontAwesomeIcons.locationDot,
                size: 20,
              ),
            ),
            Expanded(
              child: AutoSizeText(
                'event location',
              ),
            ),
          ],
        ),
    );
  }
}

Answer 1

使用我的自定义代码：

class CustomListTile extends StatelessWidget {
  Widget? trailingWidget;
  late CrossAxisAlignment crossAxisAlignment;
  late TextStyle titleStyle;
  late TextStyle subtitleStyle;
  String title;
  String? subtitle;
  Widget? leadingWidget;
  CustomListTile(
      {super.key,
      this.trailingWidget,
      this.crossAxisAlignment = CrossAxisAlignment.center,
      this.titleStyle =
          const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
      this.subtitleStyle =
          const TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
      required this.title,
      this.subtitle,
      this.leadingWidget});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: crossAxisAlignment,
      children: [
        leadingWidget ?? Container(),
        const SizedBox(
          width: 16,
        ),
        Expanded(
          child: Column(
            children: [
              Text(
                title,
                style: titleStyle,
              ),
              Text(subtitle ?? "", style: subtitleStyle),
            ],
          ),
        ),
        const SizedBox(width: 16),
        trailingWidget ?? Container()
      ],
    );
  }
}

解释：

在 Flutter 的ListTile中，当使用subtitle时， leading和trailing不会跨越ListTile的整个高度。 因此使用 row 创建您自己的 Widget。

两个小部件之间的详细比较：

代码：

        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                color: Colors.blue,
                child: ListTile(
                  minLeadingWidth: 0,
                  isThreeLine: true,
                  minVerticalPadding: 0,
                  contentPadding: EdgeInsets.zero,
                  leading: Container(
                    color: Colors.orange,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.home,
                        ),
                      ],
                    ),
                  ),
                  title: Container(
                    color: Colors.pink,
                    child: const Text(
                        "This is very long long long long title of the list view"),
                  ),
                  subtitle: Container(
                    color: Colors.yellow,
                    child: const Text(
                        "This is very long long long long subtitle of the list view . This is very long long long long subtitle of the list view .This is very long long long long subtitle of the list view "),
                  ),
                  trailing: Container(
                    color: Colors.orange,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.home,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                color: Colors.blue,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      color: Colors.orange,
                      child: const Icon(Icons.home),
                    ),
                    const SizedBox(
                      width: 16,
                    ),
                    Expanded(
                      child: Column(
                        children: [
                          Container(
                            color: Colors.pink,
                            child: const Text(
                              "This is very long long long long title of the list view ",
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w600),
                            ),
                          ),
                          Container(
                            color: Colors.yellow,
                            child: const Text(
                              "This is very long long long long subtitle of the list view . This is very long long long long subtitle of the list view .This is very long long long long subtitle of the list view ",
                              style: TextStyle(
                                  fontSize: 14, fontWeight: FontWeight.w400),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(width: 16),
                    Container(
                      color: Colors.orange,
                      child: const Icon(Icons.home),
                    ),
                  ],
                ),
              )
            ],
          ),
        ));

Answer 2

添加isThreeLine: true,到 ListTile 可能会起作用，只要所有内容都不是 go 超过三行。