在 Flutter 中将扩展磁贴的尾随图标居中

Question

我想将 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
        )
      ),

感谢您的帮助。

Answer 1

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))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

好的，我找到了方法。

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

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

Answer 3

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

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

在 Flutter 中将扩展磁贴的尾随图标居中

Center the trailing icon of expansion tile in Flutter

flutter

dart

widget

icons

trailing