ExpansionTile 上的中心标题

Question

我喜欢将标题居中 ExpansionTile，但找不到使标题居中的方法。这是在 Web 上测试的输出屏幕图像，在 android 模拟器上也有同样的问题。然后我转到 Inkscape 以获得更好的视图。

为了使 title 居中，我尝试使用 tilePadding、Row 并在 leading 和 trailing 上添加 SizedBox。

是的，我们创建一个 statfulWidget 来拥有相同的功能，或者添加 SizedBox 和 Row。但我真的很想知道它是什么以及为什么会导致这个问题，即使在用 Center 包装并提供 tilePadding: EdgeInsets.zero 和解决方案之后也是如此。

重现问题的小部件


void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: LSMenu(),
              ),
            ],
          ),
        ),
      ),
    );

class LSMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ExpansionTile(
        // leading: SizedBox(),
        trailing: SizedBox(),
        tilePadding: EdgeInsets.zero,

        childrenPadding: EdgeInsets.zero,
        backgroundColor: Colors.black,
        collapsedBackgroundColor: Colors.black,
        expandedAlignment: Alignment.center,
        expandedCrossAxisAlignment: CrossAxisAlignment.center,

        title: Center(
          child: Text(
            "MENU",
            textAlign: TextAlign.center,
            style: GoogleFonts.lato(
              color: Colors.white,
            ),
          ),
        ),
        children: [
          MenuItemLS(
              text: "WORK",
              onPress: () {
                print("Work");
              }),
          MenuItemLS(
              text: "ABOUT",
              onPress: () {
                print("About Nav");
              }),
          MenuItemLS(
              text: "CONTACT",
              onPress: () {
                print("Contact Nav");
              }),
        ],
      ),
    );
  }
}

class MenuItemLS extends StatelessWidget {
  final String text;
  final Function onPress;
  const MenuItemLS({
    Key? key,
    required this.text,
    required this.onPress,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10, top: 4),
      child: GestureDetector(
        onTap: () => onPress(),
        child: Text(
          text,
          style: GoogleFonts.lato(
            textStyle: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我所做的是编辑 expansion_tile.dart 文件。删除这部分代码，您应该可以将其居中。这仅适用于我认为的小部件的缓存版本。所以你可以做的是复制整个文件并把它放在本地。

这是结果

ExpansionTile 上的中心标题

center title on ExpansionTile

flutter

flutter-layout

flutter-web