Flutter - 行中的文本字段与其他小部件对齐

Question

该代码在 iOS 和 Android 上运行良好，但无法在 Web 浏览器中垂直对齐文本字段。可能出了什么问题？

iOS 输出：iOS 与 Android 相同

网页输出：网页

代码：

return LayoutBuilder(
        builder: (context, constraints) {
          double parentHeight = constraints.maxHeight;
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              InkWell(
                borderRadius: BorderRadius.circular(5),
                onTap: () {
                  if (int.parse(controller.text) > 0) {
                    updateValue((int.parse(controller.text) - 1));
                  }
                },
                child: Container(
                  height: parentHeight,
                  width: parentHeight,
                  decoration: BoxDecoration(
                    color: const Color(0xFFcc0000),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  padding: const EdgeInsets.all(2),
                  child: Center(
                    child: Icon(
                      Icons.remove,
                      size: parentHeight * 0.8,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: parentHeight * 2,
                height: parentHeight,
                child: Focus(
                  onFocusChange: (hasFocus) {
                    if (!hasFocus) {
                      if (controller.text.isEmpty) {
                        setState(() {
                          controller.text = '0';
                          updateValue(0);
                        });
                      } else {
                        updateValue(int.parse(controller.text));
                      }
                    }
                  },
                  child: TextFormField(
                    expands: true,
                    minLines: null,
                    maxLines: null,
                    controller: controller,
                    enableInteractiveSelection: false,
                    textInputAction: TextInputAction.done,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: parentHeight * 0.6,
                    ),
                    keyboardType: kIsWeb
                        ? const TextInputType.numberWithOptions(
                            signed: false,
                            decimal: false,
                          )
                        : Platform.isIOS
                            ? const TextInputType.numberWithOptions(
                                signed: true,
                                decimal: true,
                              )
                            : const TextInputType.numberWithOptions(
                                signed: false,
                                decimal: false,
                              ),
                    cursorColor: const Color(0xffcc0000),
                    maxLength: 3,
                    decoration: const InputDecoration(
                      counterText: "",
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                    ),
                    inputFormatters: <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly,
                      FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                    ],
                    autocorrect: false,
                    textCapitalization: TextCapitalization.none,
                    onChanged: (value) {
                      controller.text = value;
                    },
                    onFieldSubmitted: (value) {
                      if (controller.text.isEmpty) {
                        setState(() {
                          controller.text = '0';
                          updateValue(0);
                        });
                      } else {
                        updateValue(int.parse(controller.text));
                      }
                    },
                    onTap: () {
                      if (controller.text == '0') {
                        controller.text = '';
                      }
                    },
                    onEditingComplete: () {
                      if (controller.text.isEmpty) {
                        setState(() {
                          controller.text = '0';
                          updateValue(0);
                        });
                      } else {
                        updateValue(int.parse(controller.text));
                      }
                    },
                  ),
                ),
              ),
              InkWell(
                borderRadius: BorderRadius.circular(5),
                onTap: () {
                  updateValue((int.parse(controller.text) + 1));
                },
                child: Container(
                  height: parentHeight,
                  width: parentHeight,
                  decoration: BoxDecoration(
                    color: const Color(0xFFcc0000),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  padding: const EdgeInsets.all(2),
                  child: Center(
                    child: Icon(
                      Icons.add,
                      size: parentHeight * 0.8,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          );
        },
      );

也许 field 的 Expands 属性不适用于 Web？如果您知道替代解决方案，我们将不胜感激！谢谢

Answer 1

尝试使用

Center

小部件包裹该文本字段。

那是因为该行的

mainAxisAlignment.center

已应用于该文本字段的 SizedBox。

虽然这个大小的框具有动态高度，但它在 Web 视图中应该更大，这导致将文本字段放在其左上角。

因此，用中心小部件包裹文本字段。