我正在写一个flatter应用程序,它假设有一行图标和文本,但由于某些原因,我无法将文本与图标垂直放置在同一行中.我的意思是,我希望有一个图标,而不是在同一行中有一个文本,但文本比图标高一点.有人知道我该怎么修吗?.(我需要排好队,因为我想排更多的队).

我的代码:

              Column(
                children: [
                  Container(
                    height: size.height * .04,
                    color: NotificationColor,
                    child: Row(
                      children: [
                        Wrap(
                          spacing: size.width * .040,
                          children: [
                            const Icon(CupertinoIcons.bell),
                            Text(
                              "Notification", // this is the text that is higher then the icon
                              style: TextStyle(
                                fontSize: size.width * .035,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: size.height * .01),
                  Container(),
                  SizedBox(height: size.height * .01),
                  Container(),
                ],
              ),

推荐答案

您是否try 过使用该行的以下属性?

CrossAxisAlignment.center

这将垂直对齐该行的所有子项.

让我知道它是否有效!


使现代化

试试下面的代码,它应该可以正常工作.

Column(
    children: [
      Container(
        height: MediaQuery.of(context).size.height * .04,
        color: Colors.red,
        child: Row(
          children: [
            Wrap(
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: MediaQuery.of(context).size.width * .040,
              children: [
                const Icon(CupertinoIcons.bell),
                Text(
                  "Notification", // now the text is vertically aligned with the icon
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width * .035,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      SizedBox(height: MediaQuery.of(context).size.height * .01),
      Container(),
      SizedBox(height: MediaQuery.of(context).size.height * .01),
      Container(),
    ],
  ),

Flutter相关问答推荐

如何在Flutter的easy_translation包中链接嵌套的链接翻译?

Flutter -使用最小高度展开

Fighter:基于ChangeNotifier状态动态更新AppBar中的图标

FCM通知显示两次通知(&A)

如何使用Dio/Ffltter(前端)和amp;Go(后端)向API发送正确的请求

设置Flutter 中的ListView.Builder()的最小高度

在创建显示此错误的Flutter 深度链接时

Flutter飞溅屏幕即使在修改后仍显示默认徽标和背景色

打开键盘时屏幕组件会被压扁

找不到任何与 com.google.firebase:firebase-sessions:[15.0.0, 16.0.0) 匹配的版本

断言失败:std::move(hal_2_1_verifier).Run(). 初始化,LE音频客户端至少需要Bluetooth音频HAL V2.1

Flutter屏幕适配 - 在模拟器和真实手机上文本尺寸不同

文本溢出文本框 - Flutter

Flutter url_launcher 插件抛出java.lang.IllegalArgumentException:接收器未注册:io.flutter.plugins.urllauncher.WebViewActivity

如何解决需要一个标识符,但得到的是:.try 在:之前插入一个标识符.dart 错误

无法使用 bloc 更新 ListView.builder 的特定时间

你如何在 Flutter 中组合两个数组?

Flutter 构建方法使用的是旧版本的变量?

对话框打开时如何使背景模糊?

如何在 Flutter 中将 ScaffoldMessenger 中的 Snackbar 显示为 Widget?