Flutter中TabBar内TextFormField输入时内容不可见问题求解

问题现象 #

输入前界面：

输入时界面：

核心问题根源 #

• 布局结构冗余嵌套：TabBarView子组件外层错误套了Expanded，TabBarView本身会自动填充父级可用空间，额外的Expanded会导致布局约束计算异常
• 重复嵌套滚动组件：TabBarView内连续嵌套两层SingleChildScrollView，产生滚动冲突，无法正确响应键盘弹起后的滚动偏移
• 冗余嵌套Scaffold：外层已有Scaffold的前提下，内层又嵌套了一层Scaffold，导致resizeToAvoidBottomInset属性冲突，键盘弹起时页面没有正确上移露出输入框

修复步骤 #

1. 移除TabBarView子项外层的Expanded组件，直接将SingleChildScrollView作为TabBarView的子元素
2. 删除冗余的嵌套ScrollView和无意义的外层Column，只保留一层SingleChildScrollView承载表单项
3. 移除内层多余的Scaffold，直接将TabBar、TabBarView放到外层的布局结构中
4. 确保外层Scaffold的resizeToAvoidBottomInset为true（默认值即为true，移除内层Scaffold后会自动生效）

额外注意：你的密码输入框校验逻辑写反了，当前是内容非空时报错，应该改为if(value!.isEmpty)才返回错误提示。

核心修改代码示例 #

// 仅展示修改后的TabBarView核心部分代码
body: TabBarView(children: [
  // 移除外层Expanded，直接使用SingleChildScrollView
  SingleChildScrollView(
    // 移除多余的嵌套Column和第二层SingleChildScrollView
    child: Column(
      children: [
        Container(
          color: whiteTextBox,
          height: 48,
          child: TextFormField(
            controller: _usernameController,
            maxLines: 1,
            decoration: InputDecoration(
                contentPadding:
                EdgeInsets.only(
                    top: 14.5,
                    bottom: 14.5,
                    left: 10),
                border: OutlineInputBorder(
                    borderRadius:
                    BorderRadius.circular(5),
                    borderSide:
                    BorderSide(color: grayPrimaryTwo)),
                hintText: "Nama Pengguna",
                hintStyle: smallHintGray),
          ),
        ),
        // 其余表单项、按钮组件保持原有逻辑不变
        // ...
      ],
    ),
  )
]),

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