按钮随机收缩

Posted 2023-05-07

【中文标题】按钮随机收缩

【英文标题】：Buttons randomly shrink

【发布时间】：2022-01-19 00:02:31

【问题描述】：

我遇到了一个问题，即我的欢迎屏幕上的按钮随机不占用所有可用的水平空间。

Incorrect small buttons

Normally how the buttons display

按钮代码本身的小sn-p：

Column(
  children: [
    Padding(
      padding: const EdgeInsets.fromLTRB(45, 1, 45, 0),
      child: OutlinedButton(
        onPressed: () => controller.login(context),
        child: const Text(Constants.logIn),
      ),
    ),
    const SizedBox(height: 20),
    Padding(
      padding: const EdgeInsets.fromLTRB(45, 0, 45, 0),
      child: ElevatedButton(
        child: const Text(Constants.signUp),
        onPressed: () => controller.openPanel(
          SlidingPanelState.signup,
        ),
      ),
    ),
  ],
), 

这只发生在 android 上，当我从商店安装应用程序时，而不是当我直接从本地构建安装 apk 时。

感觉类似于当您需要使用 jquery Document.ready() 来让事物渲染以能够获取元素（或容器）的正确大小时。不过，我似乎找不到任何关于这个问题的担忧，所以我不知道为什么会发生这种情况。

感谢您提供任何信息！

【问题讨论】：

添加到您的专栏crossAxisAlignment:CrossAxisAlignment.stretch

是的，但问题是有时它看起来是正确的，但有时它看起来像那些小按钮。在同一台设备上随机发生。

【参考方案1】：

只需将 crossAxisAlignment 属性添加到您的列并将其设置为 CrossAxisAlignment.stretch

Column(
  crossAxisAlignment:CrossAxisAlignment.stretch,
  children: [
    Padding(
      padding: const EdgeInsets.fromLTRB(45, 1, 45, 0),
      child: OutlinedButton(
        onPressed: () => controller.login(context),
        child: const Text(Constants.logIn),
      ),
    ),
    const SizedBox(height: 20),
    Padding(
      padding: const EdgeInsets.fromLTRB(45, 0, 45, 0),
      child: ElevatedButton(
        child: const Text(Constants.signUp),
        onPressed: () => controller.openPanel(
          SlidingPanelState.signup,
        ),
      ),
    ),
  ],
),