主页 / coding / 问题 / 79322686
Accepted
Toxic Prince
Asked: 2025-01-02 10:54:02 +0800 CST

如何在 Flutter 中将图标相对于文本小部件垂直居中？

  • 772

我正在尝试在 Flutter 中显示一个标题，其中标题Icon与小部件高度的中心对齐Text。这是我目前拥有的小部件结构：

//dart

Widget header() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Welcome back",
        style: TextStyle(
          fontSize: 20,
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "User name",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          Icon(
            kVerifiedIcon,
            color: kPrimaryColor,
            size: 15,
          ),
        ],
      ),
    ],
  );
}

结果：

在此处输入图片描述

目前，Icon相对于 似乎略有错位Text。我希望Icon根据 的高度垂直居中Text。

我尝试调整size的Icon并更改的crossAxisAlignment属性Row，但是没有按预期工作。

flutter

2 个回答

  1. 在里面添加图标小部件Container并Padding提供顶部填充，我已尝试使用容器填充。您也可以尝试使用transform属性而不是填充

    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "Welcome back",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "User name",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 1.5), // adjust padding on your need
              //transform: Matrix4.translationValues(0, 1.5, 0),
              child: Icon(
                Icons.verified_rounded,
                size: 15,
              ),
            ),
          ],
        ),
      ],
    ),

    结果屏幕 -在此处输入图片描述

    • 1
  2. Best Answer

    在您提供的代码中，图标位于行内中央，但需要从顶部稍微填充一点，才能使图标与文本垂直对齐。尝试以下代码...

        Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Welcome back',
            style: TextStyle(
              fontSize: 20,
            ),
          ),
          Row(
            children: [
              Text(
                'User name',
                style: TextStyle(
                  fontSize: 22,
                ),
              ),
              SizedBox(width: 5),
              Container(
                padding: EdgeInsets.only(top: 2),
                child: Icon(
                  Icons.verified_rounded,
                  size: 15,
                ),
              ),
            ],
          ),
        ],
      ),
    • 0

相关问题