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

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

这是我的 expansionTile,右下角有尾随:

我已经尝试将 Icon 封装在 AlignContainer 中但不起作用,我还尝试了 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,
  ),

【讨论】:

    猜你喜欢
    • 2018-01-08
    • 2019-08-05
    • 2022-06-26
    • 1970-01-01
    • 2021-12-08
    • 1970-01-01
    • 2020-01-10
    • 2020-03-01
    • 1970-01-01
    相关资源
    最近更新 更多