Flutter页面顶部RaisedButton对齐异常及TextFormField问题求解

问题1：顶部操作按钮错位修复 #

错误根因 #

你将所有页面元素都放在了Row组件内，Row是水平排列容器，会把按钮、高度占位SizedBox、表单字段全部横向排布，自然会出现按钮被挤到下方、位置错乱的问题，同时你给第一个按钮套了Expanded、第二个按钮没有，也会加剧两个按钮的对齐偏差。

修复方案 #

1. 把Form下的Row改为Column，垂直排列所有元素
2. 两个操作按钮单独放在一个Row容器内，不要和下方表单字段混排
3. 去掉addCancelButton方法里多余的Align组件，外层Row已经可以控制两个按钮的左右分布

修复后核心代码示例

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(left: 20, right:20),
          child: Form(
            key: _formKey,
            // 外层改用Column垂直排列所有内容
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 两个按钮单独放在一行
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    addCancelButton(
                        'add',
                        Theme.of(context).accentColor,
                        Theme.of(context).backgroundColor),
                    addCancelButton(
                        'Cancel',
                        Theme.of(context).accentColor,
                        Theme.of(context).backgroundColor),
                  ],
                ),
                SizedBox(height: 80,),
                // 下方表单组件保持原有逻辑不变
                modalBottomSheet(
                  userInput: widget.title,
                  buttonFeild: 'Title',
                  buttonHinit: 'Ex: My friend birthday',
                  buttonKeyboardType: TextInputType.text,
                  butonColor: Theme.of(context).backgroundColor,
                ),
                // 剩余SizedBox、其他modalBottomSheet组件直接沿用原有代码即可
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

// 简化后的addCancelButton方法
Widget addCancelButton(String Buttontext, textColor, backgroundColor) {
  return SizedBox(
    width: 79,
    child: RaisedButton(
      onPressed: () {},
      child: Text(Buttontext,
          style: TextStyle(
            fontSize: 13,
            fontFamily: 'Montserrat-Arabic',
          )),
      color: backgroundColor,
      textColor: textColor,
      elevation: 0,
    ),
  );
}

问题2：TextFormField显示异常修复 #

错误根因 #

1. 你给prefixIcon只设置了上padding没有放实际组件，空的prefixIcon会占用固定宽度，挤压输入框内容的显示位置
2. 自定义的contentPaddingText水平值设为100，过大的水平内边距会导致输入内容/提示文字被挤出可视区域
3. 多行输入场景下没有设置minLines匹配TextInputType.multiline配置，会导致输入框高度不符合预期

修复方案 #

1. 移除空的prefixIcon配置，如果需要左侧内边距直接通过contentPadding设置即可
2. 调整contentPadding的水平值到合理范围，通常设为12-16即可
3. 多行输入时同步设置minLines参数，保证输入框初始高度适配多行输入

修复后核心代码示例

TextFormField(
  keyboardType: widget.buttonKeyboardType,
  // 适配多行输入的高度配置
  minLines: widget.buttonKeyboardType == TextInputType.multiline ? 3 : 1,
  maxLines: widget.maxLine ?? 1,
  controller: widget.textEditingController,
  decoration: InputDecoration(
    suffixIcon: widget.icon != null ? IconButton(
        onPressed: widget.IconButtonFuncation,
        icon: Icon(
          widget.icon,
          color: Colors.white,
        )) : null,
    // 移除空的prefixIcon配置
    contentPadding: widget.contentPaddingText ?? const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
    disabledBorder: InputBorder.none,
    hintText: widget.buttonHinit,
    hintStyle: TextStyle(
      color: Theme.of(context).hintColor,
      fontSize: 13,
      fontFamily: 'Montserrat-Arabic',
      fontWeight: FontWeight.w400,
    ),
    filled: true,
    fillColor: widget.butonColor,
    border: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  validator: (String value) {
    if (value.isEmpty) {
      return 'Feild is Required';
    }
    return null;
  },
  onSaved: (String value) {
    // 原有逻辑保持不变
  },
)

内容的提问来源于stack exchange，提问作者Lama