在 Flutter 中将扩展 tile 的尾随图标居中答案

【问题标题】：Center the trailing icon of expansion tile in Flutter在 Flutter 中将扩展 tile 的尾随图标居中
【发布时间】：2022-01-11 08:24:28
【问题描述】：

我想将 expansionTile 的尾随图标水平居中，

这是我的 expansionTile，右下角有尾随：

我已经尝试将 Icon 封装在 Align 和 Container 中但不起作用，我还尝试了 Padding 但如果你改变屏幕大小，它就不稳定。

对齐的代码：

trailing : Align(
    alignment: Alignment.center,
    child: Icon(
      BeoticIcons.clock,
      color: BeoColors.lightGreyBlue
    )
  ),

使用容器：

trailing: Container(
        alignment: Alignment.center,
        child: Icon(
          BeoticIcons.clock,
          color: BeoColors.lightGreyBlue
        )
      ),

感谢您的帮助。

【问题讨论】：

你能添加你的代码sn-p
请添加您尝试过的代码
刚刚添加，谢谢。

标签： flutter dart widget icons trailing

【解决方案1】：

这对你有用。使用 LayoutBuilder 获取父控件宽度，并使用约束设置相对填充。例如，使用 constraints.maxWidth * 0.5 以使宽度居中。如果您更改屏幕大小，您的填充将保持稳定:)

trailing: LayoutBuilder(builder: (ctx, constraints) {
              return Padding(
                padding: EdgeInsets.only(
                  right: constraints.maxWidth * 0.5,
                ),
                child: Icon(
                  Icons.menu,
                ),
              );
            }),

【讨论】：

最初的问题是居中尾随，而不是标题。所以这就是我的回答。

【解决方案2】：

you can use column and align your icon like this way hope this code will help you, thank you

import 'package:flutter/material.dart';

class Hello extends StatelessWidget {
   const Hello({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 140,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.0),
              color: Colors.deepPurple[200],
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Center(child: Text("Hello")),
                  Text("Hello"),
                  SizedBox(height: 50,),
                  Align(
                    alignment: Alignment.center,
                      child: Icon(Icons.lock_clock))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

我试过了，仍然无法按预期进行尾随....

【解决方案3】：

好的，我找到了方法。

只需将图标放在ExpansionTile的title属性中即可：

return ExpansionTile(
  title: Icon(
    BeoticIcons.simply_down,
    color: BeoColors.lightGreyBlue,
  ),

【讨论】：