android - Flutter布局不一致

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,
        ),
      ),
    ],
  ),
),