Question

所以我有一个奇怪的问题。我的Flutter应用在Android和iOS上呈现出截然不同的效果。我还有其他几个flutter应用程序，所以这个问题很奇怪。看看下面的屏幕截图：

这就是它在Android上的外观。我希望它看起来的样子。

现在这是iOS屏幕快照。看看“ Hi Tshepo ....”上的文字是如何重叠的。

我不确定为什么它在iOS上的渲染方式不同。这是代码：

return Theme(
      data: Styles.getCustomInputThemeData(),
      child: Container(
        margin: EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            Modules.buildErrorMessageLayout(model.getLaunchModel().getLoginError),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                model.getLaunchModel().getExistingUser().getWelcomeBackMessage,
                textAlign: TextAlign.center,
              ),
            ),
            SizedBox(
              height: 8.0,
            ),
            TextFormField(
              focusNode: _passwordFieldFocusNode,
              onFieldSubmitted: (_) =>onTap,
              initialValue: "123ABc",
              obscureText: true,
              decoration: InputDecoration(
                icon: Icon(SmartelIcons.locked_5,
                    color: Colors.grey[700]),
                hintText: Constants.PASSWORD,
                labelText: Constants.PASSWORD,
              ),
              validator: (val) => Modules.validateTextField(val),
              onSaved: (val) => model.getUser().password = val,
            ),
            SizedBox(
              height: 16.0,
            ),
            InkWell(
              onTap: () => model.getLaunchModel().resetExistingUser(),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  Constants.NOT_ME_BUTTON,
                  style: TextStyle(
                      color: Colors.blue,
                      decoration: TextDecoration.underline),
                ),
              ),
            )
          ],
        ),
      ),
    );

Answer 1

您不能尝试将Text包装在Flexible中。然后将其包裹在Row上，使其在x轴上调整并居中。

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Flexible(
        child: Text(
          model.getLaunchModel().getExistingUser().getWelcomeBackMessage,
          textAlign: TextAlign.center,
        ),
      ),
    ],
  ),
),

颤振布局不一致

1 个答案: