Flutter 布局不一致答案

【问题标题】：Flutter Inconsistent LayoutFlutter 布局不一致
【发布时间】：2019-07-13 09:22:58
【问题描述】：

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

这就是它在 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),
                ),
              ),
            )
          ],
        ),
      ),
    );

【问题讨论】：

标签： android ios flutter

【解决方案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,
        ),
      ),
    ],
  ),
),

【讨论】：